摘要：此文研究中的拖放接口，提供各個屬性和方法的說明，解決拖放過程中的拖拽數據對象存儲和獲取問題。方法增加一個拖拽數據對象到屬性中，并返回增加的拖拽數據對象。若拖拽數據對象是文本字符串類型，通過回調函數獲取拖拽數據中的字符串數據。

此文研究Web API中的拖放接口，提供各個屬性和方法的說明，解決拖放過程中的拖拽數據對象存儲和獲取問題。

拖放API作用到兩個目標對象，分別是拖拽目標對象和放置目標對象。

一個設置draggable屬性的值為trueDOM元素或者一個選中狀態的文本區塊可以成為拖拽目標。

OR

一個綁定了下圖放置目標對應的5個事件的DOM元素可以成為放置目標。

拖放API有8個事件，其中有3個事件綁定在拖拽目標上，有5個事件綁定在放置目標上。

通過下圖能更直觀觀察每個事件觸發的時機

戳我看源碼

注意：在dragover事件中使用event.preventDefault();阻止默認事件，才能觸發drop事件

在進行拖放操作時，會觸發上面所述的8個事件，每個event事件對象中都會有DataTransfer對象用來保存被拖動的數據。它可以保存一項或多項數據、一種或者多種數據類型。

用來指定拖動時被允許的效果。

在dragstart事件中設置

設置實際的放置效果，它應該始終設置成effectAllowed的可能值之一 。

在dragenter事件和dragover事件中設置

effectAllowed和dropEffect屬性的栗子：戳我看源碼

包含一個在數據傳輸上所有可用的本地文件列表。如果拖動操作不涉及拖動文件，此屬性是一個空列表。

filesZoneEl.addEventListener("drop", (event) => {
    event.preventDefault();
    let files = event.dataTransfer.files;
    for (let i = 0, len = files.length; i < len; i++) {
        let liEl = document.createElement("li");
        liEl.innerHTML = files[i].name;
        filesListEl.appendChild(liEl);
    }
});

戳我看源碼

保存一個被存儲數據的類型列表作為第一項，順序與被添加數據的順序一致。如果沒有添加數據將返回一個空列表。

存儲DataTransferItem數據對象的列表。

設置拖動源。

event.dataTransfer.addElement(element);

為一個給定的類型設置數據并存儲在items屬性中。

從items屬性中獲取給定類型的數據，無數據時返回空字符串。

event.dataTransfer.getData(type);

從items屬性中刪除與給定類型關聯的數據，若類型為空則刪除所有數據。

event.dataTransfer.clearData(type);

自定義一個期望的拖動時的圖片，默認為被拖動的節點。

event.dataTransfer.setDragImage(imgElement, offsetX, offsetY);

設置拖動時的圖片時，要把圖片預加載，否則圖片會在拖動開始dragstart事件觸發時才會加載圖片，會導致拖動圖出不來或閃一下的后果。可把圖片放到標簽并設置display:none;，原理詳看我之前的文章Web圖片資源的加載與渲染時機。

dataTramsfer對象的items屬性，包含了一系列DataTransferItem拖拽數據對象。

數組長度。

增加一個拖拽數據對象到items屬性中，并返回增加的拖拽數據對象。

event.dataTransfer.items.add(file);

從items屬性中移除指定位置的一個拖拽數據對象。

event.dataTransfer.items.remove(index);

清空items屬性中的所拖拽數據對象。

event.dataTransfer.items.clear();

DataTransferItemList列表中的拖拽數據對象。

拖拽數據對象類型。

MIME類型的Unicode字符串，例如text/plain、text/html或image/png。

若拖拽數據對象是文件類型，則返回一個文件對象。

let itemList = event.dataTransfer.items;
for (let i = 0, len = itemList.length; i < len; i++) {
    if (itemList[i].kind == "file") {
        console.log(itemList[i].getAsFile());
    }
}

若拖拽數據對象是文本字符串類型，通過回調函數獲取拖拽數據中的字符串數據。

let itemList = event.dataTransfer.items;
for (let i = 0, len = itemList.length; i < len; i++) {
    if (itemList[i].kind == "string") {
        itemList[i].getAsString((data) => {
            console.log(data);
        });
    }
}

在進行拖放操作時，有可能需要把拖拽目標的數據傳送給放置目標，此時一般操作是在dragstart事件觸發時把需要的數據存儲到一個變量，然后再drop事件觸發時獲取這個變量。但當dragstart事件和drop事件在不同的文件定義，又不想玷污全局變量的情況下，我們需要更好的辦法來存儲拖放數據。

在DataTransfer對象中的items屬性就是用來存儲拖放數據的，數據類型分為文本類型和文件類型。

event.dataTransfer.setData(type, data);

OR

event.dataTransfer.items.add(data, type);

一種文本字符串類型只能存儲一個數據，當重復文本字符串類型存儲數據時，后者會覆蓋前者。

event.dataTransfer.items.add(file);

event.dataTransfer.types

let files = event.dataTransfer.files;
for (let i = 0, len = files.length; i < len; i++) {
    console.log(files[i]);
}

OR

let itemList = event.dataTransfer.items;
for (let i = 0, len = itemList.length; i < len; i++) {
    if (itemList[i].kind == "file") {
        console.log(itemList[i].getAsFile());
    }
}

let itemList = event.dataTransfer.items;
for (let i = 0, len = itemList.length; i < len; i++) {
    if (itemList[i].kind == "string") {
        itemList[i].getAsString((data) => {
            console.log(data);
        });
    }
}

event.dataTransfer.getData(type);

event.dataTransfer.clearData(type);

event.dataTransfer.items.remove(index);

event.dataTransfer.clearData();

OR

event.dataTransfer.items.clear();

上面的幾個栗子都使用了以上方法存儲和獲取拖拽數據對象，感興趣的可以看看源碼。

歡迎關注：Leechikit
原文鏈接：segmentfault.com
到此本文結束，歡迎提問和指正。
寫原創文章不易，若本文對你有幫助，請點贊、推薦和關注作者支持。