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

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

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

一個設(shè)置draggable屬性的值為trueDOM元素或者一個選中狀態(tài)的文本區(qū)塊可以成為拖拽目標(biāo)。

OR

一個綁定了下圖放置目標(biāo)對應(yīng)的5個事件的DOM元素可以成為放置目標(biāo)。

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

通過下圖能更直觀觀察每個事件觸發(fā)的時機(jī)

戳我看源碼

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

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

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

在dragstart事件中設(shè)置

設(shè)置實際的放置效果，它應(yīng)該始終設(shè)置成effectAllowed的可能值之一 。

在dragenter事件和dragover事件中設(shè)置

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

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

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);
    }
});

戳我看源碼

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

存儲DataTransferItem數(shù)據(jù)對象的列表。

設(shè)置拖動源。

event.dataTransfer.addElement(element);

為一個給定的類型設(shè)置數(shù)據(jù)并存儲在items屬性中。

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

event.dataTransfer.getData(type);

從items屬性中刪除與給定類型關(guān)聯(lián)的數(shù)據(jù)，若類型為空則刪除所有數(shù)據(jù)。

event.dataTransfer.clearData(type);

自定義一個期望的拖動時的圖片，默認(rèn)為被拖動的節(jié)點(diǎn)。

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

設(shè)置拖動時的圖片時，要把圖片預(yù)加載，否則圖片會在拖動開始dragstart事件觸發(fā)時才會加載圖片，會導(dǎo)致拖動圖出不來或閃一下的后果?？砂褕D片放到標(biāo)簽并設(shè)置display:none;，原理詳看我之前的文章Web圖片資源的加載與渲染時機(jī)。

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

數(shù)組長度。

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

event.dataTransfer.items.add(file);

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

event.dataTransfer.items.remove(index);

清空items屬性中的所拖拽數(shù)據(jù)對象。

event.dataTransfer.items.clear();

DataTransferItemList列表中的拖拽數(shù)據(jù)對象。

拖拽數(shù)據(jù)對象類型。

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

若拖拽數(shù)據(jù)對象是文件類型，則返回一個文件對象。

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());
    }
}

若拖拽數(shù)據(jù)對象是文本字符串類型，通過回調(diào)函數(shù)獲取拖拽數(shù)據(jù)中的字符串?dāng)?shù)據(jù)。

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);
        });
    }
}

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

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

event.dataTransfer.setData(type, data);

OR

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

一種文本字符串類型只能存儲一個數(shù)據(jù)，當(dāng)重復(fù)文本字符串類型存儲數(shù)據(jù)時，后者會覆蓋前者。

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();

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

歡迎關(guān)注：Leechikit
原文鏈接：segmentfault.com
到此本文結(jié)束，歡迎提問和指正。
寫原創(chuàng)文章不易，若本文對你有幫助，請點(diǎn)贊、推薦和關(guān)注作者支持。