以前我們想實現元素的拖放效果，基本上都是使用DOM事件模型中的Mousedown、Mouseove、Mouseup等事件，來監聽鼠標的動作，不停地獲取鼠標的坐標來修改元素的位置。這導致代碼比較多，而且性能上也不是很好（不停的修改元素的位置導致頁面的reflow）現在有了html5原生的Drag &Drop事件（DnD），方便了許多，而且性能也有了提高。
1.如何使對象能夠被拖動
所有HTML元素都具有draggable屬性，要想讓對象能夠被拖動，只要設置對象的draggable屬性為true。draggable屬性具有三個值，分別是true，表示能夠被拖動；false表示不能夠被拖動；auto視瀏覽器而定。
如
在大多數的瀏覽器里面，圖片，超鏈接（<a>），文本都是可以被拖動的。
1.1拖放事件（拖：Drag，放：Drop）
| 事件 |
描述 |
目標 |
| dragstart |
開始拖對象時觸發 |
被拖動對象 |
| dragenter |
當對象第一次被拖動到目標對象上時觸發，同時表示該目標對象允許‘放’這動作 |
目標對象 |
| dragover |
當對象拖動到目標對象時觸發 |
當前目標對象 |
| dragleave |
在拖動過程中，當被拖動對象離開目標對象時觸發 |
先前目標對象 |
| drag |
每次當對象被拖動時就會觸發 |
被拖動對象 |
| drop |
當發生“放”這動作時觸發 |
當前目標對象 |
| dragend |
在拖放過程，松開鼠標時觸發 |
被拖動對象 |
注：在拖動過程中，鼠標事件比如mouseover是不會被觸發的；
完成一次成功頁面內元素拖拽的行為事件過程應該是： dragstart –> dragenter –> dragover –> drop –> dragend。有了這些事件，通過javascript就可以處理整個拖拽過程。
1.2開始拖動（dragstart、dragenter、dragover、dragleave）
dragstart:
注：effectAllowed屬性用於初始化dragenter和dragover事件中的dropEffect屬性
dragenter：
dragover：
注：
1）為了阻止瀏覽器的默認行為，比如拖動某鏈接（<a>）標簽時，防止跳轉到鏈接的地址，所以這邊需要調用e.preventDefault()；另外一個針對IE，需要在dragover事件中添加return false；
2）將設置對象的class屬性放在dragenter事件中處理，是因為dragenter事件只會在對象第一次被拖動到目標對象上觸發。如果放在dragover事件中的話，就會不停觸發設置class的事件，導致瀏覽器不斷的重繪。
1.3完成拖動（drop、dragend）
drop：
注：這邊需要阻止事件在DOM節點中冒泡，所以需要調用e.stopPropagation()
dragend：
2.DATATRANSFER對象
DnD API中我覺得最帥的一個屬性，就是這個DataTransfer了。它可以用來在拖放過程中傳遞數據。拖放過程中可以存儲的數據類型有兩種：一種是字符串（Plain Unicode string），另一種是文件（File）；
拖放數據的存儲模式：
Read/write mode：在dragstart事件中，可以添加拖放數據項
Read-only mode：在drop事件中，拖放數據項只能被讀，不能添加數據項
Protected mode：其他的drag事件，只能枚舉拖放數據項
DataTransfer接口：
注：
1）dropeffect，如果該屬性值不是effectallowed中規定的屬性，該drop動作就會失敗；
2）setDataImage()，設置拖動過程中跟隨鼠標的圖片，用來替代默認的元素；
3）addElement,添加一起跟隨拖拽的元素，如果你想讓某個元素跟隨被拖拽元素一同被拖拽，則使用此方法；
4）setData和getData
5）結合File Api，可以獲得本地拖放文件。FileReader專門用於讀取文件，根據 W3C 的定義，FileReader 接口“提供一些讀取文件的方法與一個包含讀取結果的事件模型”。
歡迎轉載，轉載時請注明出處：http://www.cnblogs.com/wpfpizicai/