关于HTML5中拖放

最新推荐文章于 2024-04-20 11:06:33 发布

weixin_30522095

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ddzhao1989/p/4641857.html

拖拽

事件：
dragstart拖拽开始
drag拖拽中
dragend拖拽结束
dragenter进入投放区
dragover投放区中移动
dragleave离开投放区
drop投放

-------------------
一般在dragover(投放区中移动)事件中，默认地，无法将数据元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。可通过调用 ondragover 事件的 event.preventDefault()方法。

在dragstart（拖拽开始）事件中可以传值，通过dataTransfer.setData() 方法设置被拖数据的数据类型和值.然后可以在drop（投放）事件中得到开始出传过来的值，通过dataTransfer.getData()方法获取。

下面是一个简单的拖放代码：（后面封装的函数都是兼容性的，可以作为参考文件。）

	<!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>