h5实现拖放功能

刺骨的言语ヽ痛彻心扉 2022-02-24 13:16 242阅读 0赞

## 简介 ##

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