簡介：
最早在網頁中引入JavaScript拖放功能是IE4。當時，網頁中只有兩種對象可以拖放：圖像和某些文本。拖放圖像時，把鼠標放到圖像上，按住鼠標不放就可以拖放它。拖放文本時，要先選中文本，然后可以像拖放圖像一樣拖放被選中的文本。在IE4中，唯一有效的放置目標是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且幾乎網頁中的任何元素都可以作為放置目標。IE5.5更進一步讓網頁中的任何元素都可以拖放。HTML5以IE的實例為基礎指定了拖放規范。
一、基本釋義
1 實現拖拽效果
* 要拖拽的文件是什么? - 源元素
* 要拖拽到哪里去? - 目標元素
2 目前實現拖拽效果
* 使用原生DOM就能實現 - 最麻煩
* 使用jQuery的插件 - 拖拽效果
* HTML5中提供的拖拽功能
二、HTML5中實現拖拽
1. 源元素事件
* dragstart - 當鼠標開始拖放時被觸發
* drag - 當鼠標拖放過程中,類似於mousemove事件
* dragend - 當鼠標結束拖放時被觸發
1 // 為源元素綁定源元素事件 2 myimg.addEventListener("dragstart",MyDragStart); 3 myimg.addEventListener("drag",MyDrag); 4 myimg.addEventListener("dragend",MyDragEnd);
2. 目標元素事件
* dragenter - 當鼠標拖放進入到目標元素內被觸發
* dragover - 當鼠標到達目前元素被觸發
* 為該事件增加event.preventDefault();
* drop - 當鼠標實現拖放效果時被觸發
* 默認情況下,該事件沒有被觸發
* 原因 - HTML頁面默認情況下,不允許拖放
* 稱之為HTML頁面的默認行為
* 解決 - 阻止頁面的默認行為
* 事件對象event.preventDefault()方法
* dragleave - 當鼠標拖放離開目標元素被觸發
1 // 為目標元素綁定事件 2 d2.addEventListener("dragenter",MyDragEnter); 3 d2.addEventListener("dragover",MyDragOver); 4 d2.addEventListener("drop",MyDrop); 5 d2.addEventListener("dragleave",MyDragLeave);
3. dataTransfer對象
* 作用 - 類似於window系統的剪切板的功能
* 功能
* 可以將源元素的信息(數據),存儲在這里
* 將存儲在該對象的源元素信息,提供給目標元素
* 方法
* setData() - 設置(源元素)數據
* 在源元素事件中使用
* getData() - 獲取設置的數據
* 在目標元素事件中使用
* clearData() - 清除(設置的)數據
* 所有的數據內容,存儲在瀏覽器內存中
* 當使用完畢數據內容時,清除
* setDragImage()方法
* 作用 - 修改拖放過程中,鼠標跟隨的圖片效果
* 用法 - drag、dragstart等事件
* 注意 - 實際操作中,該方法幾乎不用
4.可拖動
默認情況下，圖像、鏈接和文本是可以拖動的，也就是說，不用額外編寫代碼，用戶就可以拖動它們。文本只有在被選中的情況下才能拖動，而圖像和鏈接在任何時候都可以拖動。
讓其它元素可以拖動也是可能的。HTML5為所有HTML元素規定了一個draggable屬性，表示元素是否可以拖動。圖像和鏈接的draggable
屬性自動被設置成了true，而其它元素這個屬性的默認值都是false。要想讓其它元素可拖動，或者讓圖像或鏈接不能拖動，都可以設置這個屬性。例如：
1 <!-- 讓這個圖像不可以拖動 --> 2 <img src="smile.gif" draggable="false" alt+"Smiley face"> 3 <!-- 讓這個元素可以拖動 --> 4 <div draggable="true">...</div>
支持draggable屬性的瀏覽器有IE10+、Firefox 4+、Safari 5+和Chrome。Opera
11.5以及之前的版本都不支持HTML5的拖放功能。另外，為了讓Firefox
支持可拖動屬性，還必須添加一個ondragstart事件處理程序，並在dataTransfer對象中保存了一些信息。
5.dropEffect 與 effectAllowed
利用dataTransfer對象，可不光是能夠傳輸數據，還能通過它來確定被拖動的元素以及作為放置目標的元素能夠接受什么操作。為此，需要訪問dataTransfer對象的兩個屬性：dropEffect和effectAllowed。
其中，通過dropEffect屬性可以知道被拖動的元素能夠執行哪種放置行為。這個屬性有下列4個可能的值。
1. "none"：不能把拖動的元素放在這里。這是除文本框之外所有元素的默認值。
2. "move"：應該把拖動的元素移動到放置目標。
3."copy"：應該把拖動的元素復制到放置目標。
4."link"：表示放置目標會打開拖動的元素（但拖動的元素必須是一個鏈接，有URL）。
要使用dropEfect屬性，必須在ondraggenter事件處理程序中針對放置目標來設置它。
dropEffect屬性只有搭配effectAllowed屬性才有用。effectAllowed屬性表示允許拖放元素的哪種dropEffect，effectAllowed屬性可能的值如下。
1."uninitialized"：沒有該被拖動元素放置行為。
2."none"：被拖動的元素不能有任何行為。
3."copy"：只允許值為“copy”的dropEffect。
4."link"：只允許值為“link”的dropEffect。
5."move":只允許值為“move”的dropEffect。
6."copyLink"：允許值為“copy”和“link”的dropEffect。
7."copyMove"：允許值為“copy”和”link”的dropEffect。
8."linkMove"：允許職位“link”和”move”的dropEffect
9."all"：允許任意dropEffect。
必須在ondraggstart事件處理程序中設置effectAllowed屬性。
圖片在兩個div中拖放示例
HTML部分
1 <div id="d1"> 2 <img id="myimg" src="bg.jpg" /> 3 </div> 4 5 <div id="d2"></div>
js
1 //獲取圖片及兩個div元素 2 var d1 = document.getElementById("d1"), 3 myimg = document.getElementById("myimg"), 4 d2 = document.getElementById("d2"); 5 //給圖片綁定dragstart事件 6 myimg.addEventListener("dragstart",MyDragStart); 7 8 //給第二個div綁定dragover,drop兩個事件 9 d2.addEventListener("dragover",MyDragover); 10 d2.addEventListener("drop",MyDrop); 11 //給第一個div綁定dragover,drop兩個事件 12 d1.addEventListener("dragover",MyDragover); 13 d1.addEventListener("drop",MyDrop); 14 15 //圖片開始拖拽事件的處理函數 16 function MyDragStart(event){ 17 var mydata = myimg.id;//保存ID值 18 var trans = event.dataTransfer; 19 trans.setData("text",mydata); 20 } 21 //該處理函數是為阻止頁面的默認行為 22 function MyDragover(){ 23 event.preventDefault(); 24 } 25 //drop處理函數 26 function MyDrop(event){ 27 // 28 var trans = event.dataTransfer;//獲取數據保存對象 29 var mysrc = trans.getData("text");//圖片id 30 var ele = document.getElementById(mysrc);//獲取到圖片對象 31 if (ele != event.srcElement)//判斷圖片是否移動 32 { 33 event.srcElement.appendChild(ele.parentNode.removeChild(ele));//將img元素剪切到目標div中 34 } 35 36 trans.clearData("text");//清除數據 37 }