HTML5 拖放功能实战-CSDN博客

本文链接：https://blog.csdn.net/helloworlddm/article/details/89015318

简介

（1）设置元素可拖动。把 draggable 属性设置为 true
(2) 拖动什么。然后，规定当元素被拖动时，会发生什么。ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值.
（3）放到何处。ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法。
（4）进行放置。当放置被拖数据时，会发生 drop 事件。在下面的例子中，ondrop 属性调用了一个函数，drop(event)

代码讲解

基本功能：实现3个div之间的任意拖放。
实现过程：首先声明一个数组，数组初始化为3个元素对应的Node。当发生拖放事件的时候，通过数据交换发生“拖”元素的位置和“放”元素的位置，然后清空node，根据数组重新拼接node。
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素（目标元素）中
代码实现：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2,#div3
{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script  src="jquery.js"></script>
<script type="text/javascript">
var  pushArr = new Array();
//这里需要等待文档加载完成
window.onload = function(){

	var  test1 = document.getElementById("div1");
	var  test2 = document.getElementById("div2");
	var  test3 = document.getElementById("div3");
	pushArr.push(test1,test2,test3);	
}
function allowDrop(ev)
	{
		ev.preventDefault();
	}

	function drag(ev)
	{
		console.log(ev);
		ev.dataTransfer.setData("Text",ev.target.id);
	}

	function drop(ev)
	{
		
		ev.preventDefault();
		var data=ev.dataTransfer.getData("Text");
		console.log(data);
		console.log(ev.target.id);
		var  swapFirst,swapSecond;
		for (var i = 0;i < pushArr.length;i++){
			if (pushArr[i].id == data){
					swapFirst = i;
			}
			if (pushArr[i].id == ev.target.id){
					swapSecond = i;
			}
		}
		swapArr(swapFirst,swapSecond,pushArr);
		
		reInitAllEle(pushArr);
	}
	function  swapArr(first,second,arr){
		var  temp = pushArr[first];
		pushArr[first] = pushArr[second];
		pushArr[second] = temp;
	}
	function  reInitAllEle(pushArr){
			
			$("#uMain").html('');
			alert(pushArr.length);
			for (var i = 0;i < pushArr.length;i++){
				$("#uMain").append(pushArr[i]);
			}
	}

</script>
</head>
<body>
<div  id = "uMain" >
	<div id="div1"  "drop(event)" "allowDrop(event)"  draggable="true" "drag(event)" >
	  <img src="1.png"  width=20px; height = 15px; />
	</div>
	<div id="div2" "drop(event)" "allowDrop(event)" draggable="true" "drag(event)" >
		
	</div>
	<div id="div3"   "drop(event)" "allowDrop(event)" draggable="true" "drag(event)" >
		<img src="1.png"  width=50px; height = 30px; />
	</div>
	
</div>

</body>
</html>