介紹

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

事件類(lèi)型

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

注意：當(dāng)從操作系統(tǒng)向?yàn)g覽器中拖拽文件時(shí)，不會(huì)觸發(fā) dragstart 和dragend 事件。

接口

給應(yīng)用程序添加 HTML 拖放功能，主要使用 DragEvent 和 DataTransfer 這兩個(gè)接口。

DragEvent

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

DataTransfer

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

items 屬性

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

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

files 屬性

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

HTML draggable 屬性

這個(gè)屬性是枚舉類(lèi)型，而不是布爾類(lèi)型。這意味著必須顯式指定值為 true 或者 false，而不能簡(jiǎn)寫(xiě)。

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

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

1.將想要拖拽的元素的 draggable 屬性設(shè)置成 draggable=“true”。
2.為 dragstart 事件添加監(jiān)聽(tīng)。
3.在定義的監(jiān)聽(tīng)中設(shè)置拖拽數(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è)的列表項(xiàng)目到左側(cè)時(shí)，在列表項(xiàng)目元素中通過(guò) ondragstart 事件獲取到當(dāng)前的拖拽元素，然后在左側(cè)容器元素中通過(guò) ondrop 事件根據(jù)當(dāng)前的拖拽元素，可以刪除該列表項(xiàng)目。

拖拽排序

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

拖拽預(yù)覽圖片

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

拖拽效果

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

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

最后

為大家準(zhǔn)備了一個(gè)前端資料包。包含54本，2.57G的前端相關(guān)電子書(shū)，《前端面試寶典（附答案和解析）》，難點(diǎn)、重點(diǎn)知識(shí)視頻教程（全套）。



有需要的小伙伴，可以點(diǎn)擊下方卡片領(lǐng)取，無(wú)償分享