1、設置元素可拖拽屬性:draggable
- true表示可拖拽。
- false表示不可拖拽。
- auto默認值，img和帶href屬性的a標簽則表示可拖拽，其他標簽表示不可被拖拽。
- 其他值表示不可拖拽。
- 兼容FF：需要在ondragstart事件中設置ev.dataTransfer.setData("",""),元素才可以被拖拽。
2、拖拽元素事件：
- dragstart：拖拽前觸發，即鼠標按下，被拖拽元素被拖拽的瞬間觸發。
- event.dataTransfer的大部分設置均在這里配置
- 若調用event.preventDefault()則會阻止拖拽行為，導致后續的拖拽事件不被觸發
- 觸發dragstart事件后，其他元素的mousemove,mouseover,mouseenter,mouseleave,mouseout事件均不會被觸發了
- drag：拖拽前、拖拽結束之間連續觸發，即使鼠標沒有移動，只要未釋放，都會觸發。
- dragend:拖拽結束觸發，即釋放鼠標觸發。
3、目標元素事件：
- dragenter：進入目標元素觸發，相當於mouseover
- dragover：被拖拽元素在目標元素上移動時觸發，相當於mousemove
- 可以在這里設置dropEffect的值，事件的默認行為是將dropEffect設置為none
- 該事件是被拖拽元素在目標元素上移動一段時間后才觸發
- 事件的默認行為是不允許被拖拽元素在其他元素上釋放或放置（即無法觸發 drop 事件），需要通過 event.preventDefault() 來阻止默認行為才能觸發后續的 drop 事件。
- dragleave：被拖拽元素離開目標元素時觸發
- drop：被拖拽元素放置在目標元素上時觸發（釋放鼠標）
- 對於外來的被拖拽元素（超鏈接、文件、圖片源）， drop 事件的默認行為是瀏覽器將當前頁面重定向到被拖拽元素所指向的資源上
- 對文檔內部的被拖拽元素，IE10+和Chrome下的默認行為是不作為，而FF得默認行為是新打開一個文檔用於訪問被拖拽元素所指向的資源
4、事件執行順序：
- drop不觸發的時候：dragstart > drag > dragenter > dragover > dragleave > dragend
- drop觸發的時候（dragover阻止了默認事件）：dragstart > drag > dragenter > dragover > drop > dragend
5、dataTransfer對象：
- [object DragEvent]對象：繼承自[object MouseEvent]對象，其實就多了一個dataTransfer屬性。
- [object DataTransfer]對象詳解：傳遞數據，數據類型為字符串和文件類型。
- effectAllowed和dropEffect屬性。（http://www.cnblogs.com/fsjohnhuang/p/3961066.html#t8）
6、其他屬性：
- items:數據類型為DataTransferItemList，存儲DataTransfer對象中所有的數據項。
- files:數據類型為FileList（IE5~9沒有該屬性）。
- types:數據類型為DOMStringList，存儲DataTransfer對象中所有數據項的數據類型。
7、方法：
- addElement():添加一起跟隨鼠標移動的元素。僅在 dragstart 事件中調用。
- setDragImage(image,x,y):設置拖動時跟隨鼠標移動的圖片，用來替代默認的元素，若image不是圖片元素則會元素臨時轉換為圖片；x用於設置圖標與鼠標在水平方向上的距離，y設置圖標與鼠標在垂直方向上的距離。僅在 dragstart 事件中調用。IE10+不支持該方法；
示例：
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/fsjohnhuang/p/3961066.html