如何使用 HTML 拖放 API
拖放是增強用戶互動並促進無縫用戶體驗的重要功能。無論您是要建立文件上傳器、可排序清單還是互動式遊戲，了解如何利用此 API 的功能都是 Web 開發工具包中的關鍵技能。
HTML 中拖放的基礎知識
初始類別包含可以使用指點設備（例如滑鼠）進行操作並重新定位到替代區域的元素；而後一類由通常描繪所述元素的指定目的地的元素組成，允許使用者將它們放置在這些位置。
若要在 Web 應用程式中啟用拖放功能，需要透過在對應的 HTML 標籤中使用「draggable」屬性來指定要進行操作的元素。透過將此屬性的值設為「true」（例如在提供的範例中），使用者可以透過拖放操作在介面內移動或重新定位給定元素。
<div draggable="true">This element is draggable</div>
當透過被稱為「拖曳事件」的使用者產生的輸入事件啟動拖曳操作時，網頁瀏覽器通常會提供被稱為「幻影」影像的佔位表示。此視覺提示用於指示並提供有關透過拖曳過程進行操作的元素的狀態或進度的回饋。
您可以選擇透過在其位置提供您自己的視覺內容來個性化此插圖。這可以透過從文件物件模型 (DOM) 中選擇可移動組件、產生新穎的圖像作為客製化的回饋圖形並結合
let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
event.dataTransfer.setDragImage(img, 10, 10);
})
上述程式碼區塊示範了「setDragImage」方法的使用，該方法包含三個輸入參數。初始參數暗指所需的影像，而隨後的參數對指定所述視覺表示的相應水平和垂直位移。在 Web 瀏覽器中執行並啟動拖曳元素的操作後，很明顯預設拖曳影像已被先前配置的自訂描述所取代。
為了允許釋放，有必要透過取消dragenter和dragover事件來抵消標準操作，如下所示:
const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
了解 DragEvent 接口
JavaScript 提供了 DragEvent 接口，它封裝了使用者的拖放互動。以下是與此介面關聯的一些事件類型:
在拖曳特定元素的過程中，使用者觸發「drag」事件。
Dragend 事件在拖曳操作完成時觸發，無論是因為釋放滑鼠按鈕還是按下退出鍵。
「dragenter」事件由拖曳元素在有效放置目標上移動時觸發，這可能表示涉及將資料從使用者介面中的一個位置移動到另一個位置的操作或互動。
當拖曳的元素不再位於特定放置目標之上或上方時，會觸發「dragleave」事件。該事件與「dragenter」事件相對應，該事件在拖曳的元素最初進入潛在的放置目標時發生。
在將可操作元件拖曳過接收區域的過程中，使用者的操作會觸發事件。
啟動後，將觸發“dragstart”事件以開始拖曳操作。
收到使用者的輸入後，我們將在系統內啟動「刪除」操作。當使用者在為此目的設計的指定目標區域頂部釋放項目時，會觸發此事件。
當檔案透過外部方式（例如作業系統的檔案管理工具）傳輸到 Web 瀏覽器時，瀏覽器不會啟動常規的「dragstart」或「dragend」事件作為回應。
當尋求透過演算法調度自訂拖曳事件時，「DragEvent」的使用可能會被證明是有利的。作為說明，假設人們希望在頁面載入時為給定的 div 元素啟動自訂拖曳事件。這個過程需要建立一個新的「 DragEvent 」實例，如下所示:
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');
在上述程式碼片段中，「customDragStartEvent」是「DragEvent()」類別的實例，包含兩個建構子參數。初始參數表示拖曳事件的特定類型，包括前面列出的七種可能的事件類型中的任何一種。
第二個參數表示一個對象，該物件包含名為「dataTransfer」的屬性，該屬性對應於 DataTransfer 介面的實例。本指南將更詳細地進一步探討此介面。若要存取文件物件模型 (DOM) 中所需的元素，請依照下列步驟操作…
const draggableElement = document.querySelector("#draggable");
然後新增事件監聽器，如下所示:
draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
event.dataTransfer.setData('text/plain', 'Hello, world!');
});
draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
});
在初始事件監聽器中，我們使用了一個回呼函數來記錄訊息“Drag started!”，同時也呼叫了 event 物件的 dataTransfer 屬性上的 setData 方法。這使我們能夠以無縫的方式有效地啟動我們的自訂事件。
draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);
使用 dataTransfer 傳輸數據
資料傳輸物件可作為原始元素（可拖曳實體）與其預期接收者或可放置區域之間的中間連接器。在拖放過程中，它作為臨時儲存庫運行，旨在儲存要在這兩個實體之間共享的資訊。
此資料的多功能性顯而易見，能夠採用多種格式，包括文字、URLS 和自訂資料類型，從而允許廣泛的拖放功能。
使用setData()打包數據
為了將資訊從可操作元件傳遞到容器，您可以利用 dataTransfer 物件提供的 setData() 方法的功能。這種方法使您能夠封裝要傳輸的數據，同時指定其資料類型。基本說明如下:
element.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Hello, world!');
});
在啟動移動指定為具有特定屬性的項目的行為時，我們發送一條包含訊息「Hello, world!」的訊息。採用指定為文字/純文字的格式。該內容與拖曳操作相互關聯，並且隨後可以在釋放物件的過程中由所放置物件的預期接收者檢索。
使用 getData() 擷取數據
在能夠被放置並透過其事件偵聽器的實作註冊了此功能的元素的範圍內，可以使用 getData() 方法擷取已傳輸的資料:
element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});
上述程式碼段取得由前面的「setData()」過程所建立的相同內容分類（文字/純文字）的資訊。因此，這使得人們能夠根據可放置組件環境的需要來取得和修改所傳送的資料。
拖放介面的用例
在 Web 應用程式中整合拖放功能作為升級具有巨大的潛力，但理解實現此功能的具體情況和原因至關重要。
透過使用戶能夠透過指定的放置區域輕鬆地從電腦的文件瀏覽器或桌面傳輸文件，提交媒體內容的過程得到簡化，並且更加用戶友好。
在使用者與應用程式的互動涉及各種元素（包括任務、媒體檔案或其他相關項目）的清單的情況下，為他們提供透過拖放功能重新排列這些項目的方法可以透過提供更直觀、更有效的內容組織方法。
為了創建具有資料視覺化和報告功能的互動式儀表板，拖放功能可讓使用者根據自己的喜好輕鬆地重新排列各種小部件和圖表。此功能使用戶能夠即時自訂儀表板體驗以滿足他們的特定需求，從而增強平台的整體可用性和靈活性。
牢記可訪問性
雖然拖放功能的視覺吸引力可能會對使用者的整體體驗產生積極的影響，但必須保證其在不同能力下的可訪問性。為了實現包容性，請考慮納入補充互動模式，例如基於鍵盤的控制選項，它可以適應殘疾人並擴大可用性範圍。