基于JavaScript 實現拖放功能

2019-11-19 09:22:23

字體：大中小

來源：轉載

供稿：網友

HTML 的拖放 API 依賴 DOM 事件模型，獲取拖放和放置元素的相關信息，以此實現拖放功能。我們只需要注冊很少幾個事件監聽器，就能把任何元素變成可拖動或可放置的。

拖放 API 除了提供基本的拖放功能接口外，還可以在拖放之外提供選擇，用來自定義行為。比如，可以修改拖放元素的 CSS 樣式?；蛘?，我們不移動元素，拖動的時候，復制一個副本，拖放結束后，我們就會多了一個同樣的元素。

本篇只介紹實現基本的拖放功能。

將元素設置成可拖動的

我們先從拖動元素開始。假設我們有一個容器元素，其中包含兩種類型的子元素：可拖動元素和可放置元素。舉個例子，如果我們有一個待辦事項列表，我們可以將待辦事項拖到“完成”區域。

簡單起見，我們將移動的元素稱為拖動元素，將拖動元素移入的目標元素稱為 dropzone。

<div class='parent'> <span id='draggableSpan'>  draggable </span> <span> dropzone </span></div>

這是我們的第一段代碼，子元素現在還不能拖動。

下面給拖動元素添加屬性 draggable='true' ，將它設置成一個可拖動元素。

<div class='parent'> <span id='draggableSpan' draggable='true'>  draggable </span> <span> dropzone </span></div>

現在你再用鼠標拖動拖動元素的時候，它就會跟隨鼠標移動（對不起，移動端不行:see_no_evil:）。

draggable 屬性在沒設置的情況下，默認值 auto 。就是說，元素是可不可以拖動，取決于瀏覽器的默認設置。比如，鏈接（ <a> ）默認就是可拖動的，而 <span> 就不是。

拖放事件處理器

到目前為止，如果我們拖動元素，釋放鼠標，什么事都不會發生。拖動和放置都會觸發事件，實現一個基本的拖放功能，我們最少需要用到拖放 API 中的三個事件：

ondragstart
ondragover
ondrop

學會使用 ondragstart 、 ondragover 、 ondrop 事件只是個開始。拖拽過程一共會涉及八個事件： ondrag 、 ondragend 、 ondragenter 、 ondragexit 、 ondragleave 、 ondragover 、 ondragstart 和 ondrop 。

DataTransfer

DataTransfer 接口中保存了與當前拖放過程相關的跟蹤信息，信息從 DataTransfer 對象屬性中獲得，而 DataTransfer 對象又是從 DOM 事件對象中獲得的。

技術上講， DataTransfer 接口可以同時跟蹤多個拖動對象的信息，我們這里只關注拖動一個元素的情況。:sparkles:

拖動時更新元素

下一步，我們開始設置 ondragstart 的事件處理器。

拖動開始時，我們可以在 ondragstart 處理器中，做任何想做的修改。比如更新拖動元素的 CSS 樣式，將拖動的版本設置為臨時圖片，或者其他能從 DOM 事件中訪問到的任何內容。

dataTransfer 對象的 setData 屬性可以用來設置拖動狀態信息。它接收兩個參數，第一個參數是表示內容格式的字符串，第二個參數是實際傳遞的數據。

我們要實現的功能是將拖動元素移動到一個新的父元素里面。我們需要獲取拖動元素，因此需要將拖動元素的 ID 通過 setData 屬性保存下來：

function onDragStart(event) { event  .dataTransfer  .setData('text/plain', event.target.id);}

再從事件對象中獲得拖動元素并設置 CSS 樣式：

function onDragStart(event) { event  .dataTransfer  .setData('text/plain', event.target.id); event  .currentTarget  .style  .backgroundColor = 'yellow';}

注意：如果上面的黃色背景樣式，你只希望在拖動時才應用，那么拖動結束后，就要手動將樣式恢復。就會說，拖動開始時，如果修改了元素樣式，除非再次修改過來，否則樣式是不會自動恢復的。:rainbow:

拖動開始時的處理函數寫好了，現在將它設置給可拖動元素的 ondragstart 屬性：

<div class='parent'> <span id='draggableSpan'  draggable='true'  ondragstart='onDragStart(event);'>   draggable </span> <span> dropzone </span></div>

下面是使用鼠標拖動時的效果：

現在拖動元素， ondragstart 中的代碼就會執行，樣式改變了，但釋放拖動元素后，什么事情都沒發生。接下來我們將視線轉移到 dropzone 上來。

設置元素為可放置的

ondragstart 之后，下一個要寫的處理函數就是 ondragover 了。上面講過，放置行為默認是被瀏覽器阻止的，我們需要取消這個默認行為，雙重否定為肯定，對吧？

function onDragOver(event) { event.preventDefault();}

在阻止瀏覽器干擾后，現在就能將拖動元素添加到 dropzone 了，dropzone 成為能夠接受任何拖動元素的容器元素。

<div class='parent'> <span id='draggableSpan'  draggable='true'  ondragstart='onDragStart(event);'>   draggable </span> <span ondragover='onDragOver(event);'>  dropzone </span></div>

即便現在 dropzone 可以接受拖動元素，釋放鼠標后還是看不見改變發生。

放置的時候要做什么？

現在要介紹第三個也是最后一個處理函數 ondrop 。

我們的函數邏輯遵循以下步驟：

還記得在 setData 中設置的數據嗎？
現在我們需要從 dataTransfer 對象的 getData 屬性中獲取設置的數據，數據內容是拖動元素的 ID，它會返回給我們。
使用上一步獲取的 ID，獲得拖動元素。獲取 dropzone 元素。
將拖拽元素 append 到 dropzone 中。
清理 dataTransfer 對象中保存的數據。

function onDrop(event) { const id = event  .dataTransfer  .getData('text'); const draggableElement = document.getElementById(id); const dropzone = event.target;  dropzone.appendChild(draggableElement); event  .dataTransfer  .clearData();}

因為這是我們要寫的第三個也是最后一個函數，我們只要將它傳遞給 dropzone 的 ondrop 屬性，就完成了一個完整的拖放功能！

<div class='parent'> <span id='draggableSpan'  draggable='true'  ondragstart='onDragStart(event);'>   draggable </span> <span  ondragover='onDragOver(event);'  ondrop='onDrop(event);'>   dropzone </span></div>