HTML5拖放API Drag and Drop

摘要：此文研究中的拖放接口，提供各个属性和方法的说明，解决拖放过程中的拖拽数据对象存储和获取问题。方法增加一个拖拽数据对象到属性中，并返回增加的拖拽数据对象。若拖拽数据对象是文本字符串类型，通过回调函数获取拖拽数据中的字符串数据。

此文研究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
到此本文结束，欢迎提问和指正。
写原创文章不易，若本文对你有帮助，请点赞、推荐和关注作者支持。