關於HTML5中拖放

時間 2019-12-05

標籤關於 html5 html 拖放欄目 HTML5 简体版

原文原文鏈接

拖拽

事件：
dragstart拖拽開始
drag拖拽中
dragend拖拽結束
dragenter進入投放區
dragover投放區中移動
dragleave離開投放區
drop投放

-------------------
通常在dragover(投放區中移動)事件中，默認地，沒法將數據元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。可經過調用 ondragover 事件的 event.preventDefault()方法。

在dragstart（拖拽開始）事件中能夠傳值，經過dataTransfer.setData() 方法設置被拖數據的數據類型和值.而後能夠在drop（投放）事件中獲得開始出傳過來的值，經過dataTransfer.getData()方法獲取。html

下面是一個簡單的拖放代碼：（後面封裝的函數都是兼容性的，能夠做爲參考文件。）node

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	#dropBlock{
	height: 300px;
	width: 300px;
	background: #4E67AB;
	border: 1px dashed #ddd;
	}
	#moveBlock{
	position: absolute;
	height: 80px;
	width: 80px;
	background: #CB8112;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3);
	}
	</style>
	</head>
	<body>

	<div id="dropBlock"></div>
	<div id="moveBlock" draggable="true"></div>
	</body>

	<script>

	(function(){
	var moveBlock = $("moveBlock");
	var dropBlock = $("dropBlock");
	var startPoint;
	var moveBlockPosintion
	// console.log(moveBlock);
	addEvent(moveBlock,"dragstart",function(e){

	e = getEventObject(e);
	startPoint = getPointerPositionInDocument(e);
	moveBlockPosintion = getDimensions(moveBlock);
	});
	// addEvent(moveBlock,"drag",function(){
	// console.log("拖拽中");
	// });
	// addEvent(moveBlock,"dragend",function(){
	// console.log("拖拽結束");
	// });
	// addEvent(dropBlock,"dragenter",function(){
	// console.log("進入投放區");
	// });
	addEvent(dropBlock,"dragover",function(e){

	e = getEventObject(e);
	//阻止默認事件發生
	stopDefault(e);
	});
	// addEvent(dropBlock,"dragleave",function(){
	// console.log("離開投放區");
	// });
	addEvent(dropBlock,"drop",function(e){
	e = getEventObject(e);
	var endPoint = getPointerPositionInDocument(e);
	setStyle(moveBlock,{
	left:moveBlockPosintion.left + (endPoint.x - startPoint.x)+"px",
	top:moveBlockPosintion.top + (endPoint.y - startPoint.y)+"px"
	});
	});

	})();

	//封裝document.getElementById();

	function $() {
	var elements = new Array();

	for (var i = arguments.length - 1; i >= 0; i--) {
	var element = arguments[i];

	if (typeof element == "string") {
	element = document.getElementById(element);
	}

	if (arguments.length == 1) {
	return element;
	} else {
	elements.push(element);
	}

	return elements;
	};
	};


	//封裝事件處理
	function addEvent(node, type, listener) {
	if (!(node = $(node))) return false;
	if (node.addEventListener) {
	//W3C
	node.addEventListener(type, listener, false);
	return true;
	} else if (node.attachEvent) {
	node['e' + type + listener] = listener;
	node[type + listener] = function() {
	node['e' + type + listener](window.event);
	};
	node.attachEvent('on' + type, node[type + listener]);
	return true;
	}

	return false;

	};

	//移出事件
	function removeEvent(node,type,listener){
	if (!(node = $(node))) return false;
	if(node.removeEventListener){
	node.removeEventListener(type,listener,false);
	return true;
	}else if(node.removeEvent){
	node.detachEvent('on'+type,node[type+listener]);
	node[type+listener] = null;
	return true;
	}
	return false;
	};
	//獲取事件對象
	function getEventObject(e){
	return e \|\| window.event;

	}
	//阻止事件冒泡
	function stopPropagation(eventObject){
	var eventObject = eventObject \|\| getEventObject();
	if(eventObject.stopPropagation){
	eventObject.stopPropagation();
	}else{
	eventObject.cancelBubble = true;
	}
	};
	//阻止瀏覽器默認事件
	function stopDefault(eventObject){
	var eventObject = eventObject \|\| getEventObject();
	if(eventObject.preventDefault){
	eventObject.preventDefault();
	}else{
	eventObject.returnValue = false;
	}
	};
	//獲取鼠標點擊時的x和y座標
	function getPointerPositionInDocument(eventObject) {
	eventObject = eventObject \|\| getEventObject(eventObject);
	var x = eventObject.pageX \|\| (eventObject.clientX +
	(document.documentElement.scrollLeft \|\| document.body.scrollLeft));
	var y = eventObject.pageY \|\| (eventObject.clientY +
	(document.documentElement.scrollTop \|\| document.body.scrollTop));
	return {
	'x': x,
	'y': y
	};
	};

	//獲取文檔的寬和高
	function getWindowSize(){
	var width = height = 0;
	if(this.innerWidth){
	width = this.innerWidth;
	height = this.innerHeight;
	}else if(document.documentElement && document.documentElement.clientHeight){
	width = document.documentElement.clientWidth;
	height = document.documentElement.clientHeight;
	}else if(document.body && document.body.clientHeight){
	width = document.body.clientWidth;
	height = document.body.clientHeight;
	}

	return {'width':width,'height':height};
	};

	//獲取標籤的寬、高和left、top
	function getDimensions(element){
	if (!(element = $(element))) return false;

	return {
	'left':element.offsetLeft,
	'top':element.offsetTop,
	'width':element.offsetWidth,
	'height':element.offsetHeight
	};
	}

	//設置標籤樣式
	function setStyle(element, styles) {
	if (!(element = $(element))) return false;
	for (property in styles) {
	if (!styles.hasOwnProperty(property)) continue;

	if (element.style.setProperty) {
	element.style.setProperty(
	uncamelize(property, '-'), styles[property], null);
	} else {
	element.style[camelize(property)] = styles[property];
	}
	}
	return true;
	};
	//將-形式的字符串轉換爲駝峯命名法的字符串
	function camelize(s) {
	return s.replace(/-(\w)/g, function(strMatch, p1) {
	return p1.toUpperCase();
	});
	};
	//將駝峯命名法的字符串轉換爲-形式的字符串
	function uncamelize(s, sep) {
	sep = sep \|\| '-';
	return s.replace(/([a-z])([A-Z])/g, function(strMatch, p1, p2) {
	return p1 + sep + p2.toLowerCase();
	});
	};
	</script>
	</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。