介紹

HTML5 提供了專門的拖拽與拖放的 API，目前各瀏覽器都已支持，包括 IE。HTML 拖放（Drag and Drop）接口使應用程序能夠在瀏覽器中使用拖放功能。例如，用戶可使用鼠標選擇可拖拽（draggable）元素，將元素拖拽到可放置（droppable）元素，并釋放鼠標按鈕以放置這些元素。

事件類型

事件	On 型事件處理程序	觸發(fā)時刻
drag	ondrag	當拖拽元素或選中的文本時觸發(fā)。
dragend	ondragend	當拖拽操作結束時觸發(fā) (比如松開鼠標按鍵或敲 Esc 鍵)。
dragenter	ondragenter	當拖拽元素或選中的文本到一個可釋放目標時觸發(fā)。
dragleave	ondragleave	當拖拽元素或選中的文本離開一個可釋放目標時觸發(fā)。
dragover	ondragover	當元素或選中的文本被拖到一個可釋放目標上時觸發(fā)（每 100 毫秒觸發(fā)一次）。
dragstart	ondragstart	當用戶開始拖拽一個元素或選中的文本時觸發(fā)。
drop	ondrop	當元素或選中的文本在可釋放目標上被釋放時觸發(fā)。

注意：當從操作系統(tǒng)向瀏覽器中拖拽文件時，不會觸發(fā) dragstart 和dragend 事件。

接口

給應用程序添加 HTML 拖放功能，主要使用 DragEvent 和 DataTransfer 這兩個接口。

DragEvent

繼承自 MouseEvent，有一個 dataTransfer 屬性（DataTransfer 對象），在拖放交互期間傳輸?shù)臄?shù)據(jù)主要通過這個屬性完成。

DataTransfer

保存著拖拽操作中的數(shù)據(jù)，例如拖拽事件的類型（如拷貝 copy 或者移動 move），拖拽的數(shù)據(jù)（一個或者多個項）和每個拖拽項的類型（MIME 類型）。

items 屬性

包含包含所有拖動數(shù)據(jù) DataTransferItem 對象的列表（DataTransferItemList 對象，包括 add、remove 和 clear 方法）。一個 DataTransferItem 代表一個拖拽項目，每個項目都有一個 kind 屬性（值為 string 或 file）和一個表示數(shù)據(jù)項目 MIME 類型的 type 屬性。DataTransferItem 對象也有獲取拖拽項目數(shù)據(jù)的方法：DataTransferItem.getAsFile() 和 DataTransferItem.getAsString()。

DataTransfer 對象使用同步的 getData() 方法去得到拖拽項的數(shù)據(jù)，而 DataTransferItem 對象使用異步的 getAsString() 方法得到拖拽項的數(shù)據(jù)。

files 屬性

包含數(shù)據(jù)傳輸中可用的所有本地文件的列表（FileList 對象）。如果拖動操作不涉及拖動文件，則此屬性為空列表。

HTML draggable 屬性

這個屬性是枚舉類型，而不是布爾類型。這意味著必須顯式指定值為 true 或者 false，而不能簡寫。

• 拖拽選中文本、拖拽圖像和拖拽鏈接時，會使用默認拖拽行為。
• 拖拽圖像或鏈接時，圖像或鏈接的 URL 被設定為拖拽數(shù)據(jù)。
• 對于其他元素，只有當它們作為被選中的一部分時，才會觸發(fā)默認拖拽行為。

除了圖像、鏈接和選擇的文本默認的可拖拽行為之外，其他元素在默認情況下是不可拖拽的。如果要使其他的 HTML 元素可拖拽：

1.將想要拖拽的元素的 draggable 屬性設置成 draggable=“true”。
2.為 dragstart 事件添加監(jiān)聽。
3.在定義的監(jiān)聽中設置拖拽數(shù)據(jù)。

<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">This text <strong>may</strong> be dragged.
</p> 

拖拽刪除元素

拖拽右側(cè)的列表項目到左側(cè)時，在列表項目元素中通過 ondragstart 事件獲取到當前的拖拽元素，然后在左側(cè)容器元素中通過 ondrop 事件根據(jù)當前的拖拽元素，可以刪除該列表項目。

拖拽排序

拖拽列表項目時，在列表項目元素中通過 dragstart 事件獲取到當前的拖拽元素和事件的 offsetY，然后在列表容器元素中通過 dragover 事件，根據(jù)當前拖拽移動在上面的列表元素事件的 offsetY，對比當前拖拽中的元素的 offsetY，對當前拖拽移動在上面的列表元素進行 before 或 after 操作。

拖拽預覽圖片

從本地拖拽文件到頁面中時，通過獲取 DragEvent 的 DataTransfer 對象的 files 屬性，然后由 URL.createObjectURL 創(chuàng)建對象 URL，可以預覽該圖片。

拖拽效果

HTML Drag and Drop API 方便了我們對拖拽數(shù)據(jù)的處理，如果需要實現(xiàn) HTML 元素的拖拽移動，更加方便地是使用 mouse 事件。

1.設置要拖拽的元素絕對定位或是相對定位（position:absolute/relative）。
2.監(jiān)聽 onmousedown、onmouseup 和 onmousemove 事件，獲取 clientX 和 clientY。
3.將獲取到的 clientX 和 clientY 賦值給元素的 CSS 屬性 left 和 top。

最后

為大家準備了一個前端資料包。包含54本，2.57G的前端相關電子書，《前端面試寶典（附答案和解析）》，難點、重點知識視頻教程（全套）。



有需要的小伙伴，可以點擊下方卡片領取，無償分享