本節書摘來自異步社群《html5 開發執行個體大全》一書中的第1章，第1.33節,作者： 張明星 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
執行個體說明
在html 5 中，可以使用如下對象和屬性實作拖曳處理。
datatransfer 對象：拖曳對象用來傳遞的媒介，使用一般為event.datatransfer。
draggable 屬性：就是标簽元素要設定draggable=true，否則不會有效果，例如：
上述對象和屬性支援如下滑鼠事件和方法。
ondragstart 事件：當拖曳元素開始被拖曳的時候觸發的事件，此事件作用在被拖曳元素上。
ondragenter 事件：當拖曳元素進入目标元素的時候觸發的事件，此事件作用在目标元素上。
ondragover 事件：拖曳元素在目标元素上移動的時候觸發的事件，此事件作用在目标元素上。
ondrop 事件：被拖曳的元素在目标元素上同時滑鼠鍵放開觸發的事件，此事件作用在目标元素上。
ondragend 事件：當拖曳完成後觸發的事件，此事件作用在被拖曳元素上。
event.preventdefault() 方法：阻止預設的一些事件方法等執行。在ondragover中一定要執行preventdefault()，否則ondrop事件不會被觸發。另外，如果是從其他應用軟體或是檔案中拖東西進來，尤其是圖檔的時候，預設的動作是顯示這個圖檔或是相關資訊，并不是真的執行drop。此時需要用document的ondragover事件把它直接幹掉。
event.effectallowed 屬性：就是拖曳的效果。
本執行個體分别示範了滑鼠光标在滑向某個位置時的不同顯示樣式，并且在拖動滑鼠光标時也有不同的樣式。
具體實作
使用dreamweaver建立一個名為“033.html”的檔案，具體代碼如下所示：
執行後的效果如圖1-54所示。
https://yqfile.alicdn.com/6e48200f4ef715b285d1d9bf8c480667dbc7aa65.png" >