HTML5DragandDropAPIDragandDrop

ORdroptarget下图中droptarget对应的5个事件绑定的DOM元素可以是droptarget。事件拖放API有8个事件，其中3个事件绑定到拖动目标，5个事件绑定到放置目标。绑定到拖动目标EvnetDescriptiondragstart当用户开始拖动元素或文本选择块时触发。drag当用户拖动元素或文本选择块时触发。dragend当用户完成拖动元素或文本选择时触发。（例如释放鼠标按钮或按下键盘的escap键）放置目标上的绑定EventDescriptiondragenter当元素或文本选择块被拖入有效放置目标时触发。dragover当一个元素或文本选择被拖过一个有效的放置目标时触发。dragleave当元素或文本选择被拖离有效放置目标时触发。dragexist当元素不再是选定的拖动元素时触发。（Firefox可以触发，触发顺序：dragexist->dragleave->drop；Chrome不能触发）drop当元素或文本选择块放置在有效的放置目标上时触发。通过下图，可以更直观的观察到每个事件触发的时间戳。我看源代码。注意：在dragover事件中使用event.preventDefault()；为了防止默认事件，可以触发拖放事件。当DataTransfer对象拖拽时，会触发上述。以上8个事件，每个事件对象都会有一个DataTransfer对象来保存拖拽的数据。它可以保存一种或多种数据，一种或多种数据类型。effectAllowed用于指定拖动时允许的效果。在dragstart事件中设置属性dropEffect设置实际的放置效果，应该始终将其设置为effectAllowed的可能值之一。在dragenter事件和dragover事件中设置effectAllowed和dropEffect属性的栗子：戳我看看源文件包含数据传输中所有可用本地文件的列表。如果拖动操作不涉及拖动文件，则该属性为空列表。filesZon??eEl.addEventListener("drop",(event)=>{event.preventDefault();letfiles=event.dataTransfer.files;for(leti=0,len=files.length;i标签中，并设置display:none;，详见我之前的一篇关于Web图片资源的加载和渲染时机的文章。DataTransferItemListdataTramsfer对象的items属性包含一系列DataTransferItem拖放数据对象。属性length数组长度。方法add()向items属性添加一个拖动数据对象，并返回添加的拖动数据对象。事件.dataTransfer.items.add（文件）；remove()从items属性中删除指定位置的拖动数据对象。event.dataTransfer.items.remove(index);clear()清除items属性中拖拽的数据对象。事件.dataTransfer.items.clear();将数据对象拖放到DataTransferItemDataTransferItemList列表中。属性种类拖动数据对象类型。值描述文件文件类型。字符串文字字符串类型。typeMIME类型的Unicode字符串，例如text/plain、text/html或image/png。如果拖动的数据对象是文件类型，方法getAsFile()返回一个文件对象。让itemList=event.dataTransfer.items;for(leti=0,len=itemList.length;i{console.log(数据);});}}拖放对象的数据存储，在拖放操作过程中，可能需要将拖放目标的数据传递给放置目标。这个时候一般的操作就是在dragstart事件触发的时候把需要的数据存到一个变量里，然后在drop事件触发的时候拿到这个变量。但是当dragstart事件和drop事件定义在不同的文件中并且我们不想污染全局变量时，我们需要一种更好的方式来存储拖放数据。DataTransfer对象中的items属性用于存储拖放数据，数据类型分为文本类型和文件类型。存储文本字符串类型数据：event.dataTransfer.setData(type,data);ORent.dataTransfer.items.add(data,type);一个文本字符串类型只能存储一个数据，当重复文本字符串类型存储数据时，后者覆盖前者。存储文件类型数据：event.dataTransfer.items.add(file);获取所有文本字符串类型的拖拽数据对象event.dataTransfer.types获取所有文件类型的拖拽数据对象letfiles=event.dataTransfer.files;for(leti=0,len=files.length;i{console.log(data);});}}获取指定文本字符串类型的拖动数据对象event.dataTransfer.getData(type);删除指定文本字符串类型Data对象的拖拽event.dataTransfer.clearData(type);在指定位置删除拖动的数据对象event.dataTransfer.items.remove(index);清除所有拖动的数据对象event.dataTransfer.clearData();ORent.dataTransfer.items。清除（）;栗子上面的几个栗子就是用上面的方法存储和获取拖拽数据对象。有兴趣的可以看看源码。欢迎关注：Leechikit