标签：
1、设置元素可拖拽属性:draggable
2、拖拽元素事件：
3、目标元素事件：
4、事件执行顺序：
5、dataTransfer对象：
6、其他属性：
7、方法：
示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>模拟回收站</title> 6 <style type="text/css"> 7 li{ 8 list-style: none;width:100px; height:25px; line-height: 25px; background:#ccc; margin:5px; text-align: center; 9 } 10 #recycle{ 11 width:200px; height:100px; background:red; position: absolute; top:200px; 12 } 13 </style> 14 </head> 15 <body> 16 <ul id="list"> 17 <li draggable="true">图标1</li> 18 <li draggable="true">图标2</li> 19 <li draggable="true">图标3</li> 20 </ul> 21 <div id="recycle"></div> 22 </body> 23 </html> 24 <script> 25 window.onload = function(){ 26 var oList = document.getElementById("list"); 27 var aLi = oList.getElementsByTagName("li"); 28 var oRecycle = document.getElementById("recycle"); 29 30 var flag = false; //标示是否把图标放入到回收站 31 for(var i = 0 ; i<aLi.length;i++){ 32 aLi[i].index = i; 33 aLi[i].ondragstart = function(ev){ 34 ev = ev || window.event; 35 ev.dataTransfer.setData("index",this.index); 36 37 ev.dataTransfer.setDragImage(getImg(),0,0); 38 } 39 aLi[i].ondragend = function(ev){ 40 flag && oList.removeChild(this); 41 } 42 } 43 44 oRecycle.ondragover = function(ev){ 45 ev.preventDefault(); 46 } 47 oRecycle.ondrop = function(ev){ 48 var index = ev.dataTransfer.getData("index"); 49 this.appendChild(getLiByIndex(index)); 50 flag = true; 51 } 52 53 function getImg(){ 54 var oImg = document.createElement("img"); 55 oImg.src = "img/111.png"; 56 return oImg; 57 } 58 59 function getLiByIndex(index){ 60 for(var i = 0 ;i < aLi.length;i++){ 61 if(aLi[i].index == index) return aLi[i]; 62 } 63 } 64 } 65 </script>
标签：
原文地址：http://www.cnblogs.com/tengri/p/5562831.html
