Drag and Drop

draggable="true"

对象	事件	说明
被拖动对象	drag	拖动时反复触发 drag ，事件在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。
被拖动对象	dragstart	拖动开始时触发，事件在用户开始拖动元素或被选择的文本时调用
被拖动对象	dragend	拖动结束时触发，事件在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）
目标对象	drop	事件在元素或文本选择被放置到有效的放置目标上时触发。为确保 drop 事件始终按预期触发，应当在处理 dragover 事件的代码部分始终包含 preventDefault() 调用
目标对象	dragenter	进入区域时触发，事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发
目标对象	dragover	悬浮区域时触发，事件在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发
目标对象	dragleave	离开区域时触发，事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发

const element = document.getElementById('draggable');
 
element.addEventListener('dragstart', function(event) {
    // 将数据传递给拖拽事件的数据传输对象（DataTransfer对象）
    event.dataTransfer.setData('text/plain', 'asdfasdf');
});
 
element.addEventListener('dragend', function(event) {
    // 读取并使用数据
    const data = event.dataTransfer.getData('text/plain');
});

DataTransfer

属性	说明
dropEffect	获取当前选定的拖放操作类型或者设置的为一个新的类型。值为：none、copy、link、move
effectAllowed	提供所有可用的操作类型。值是：none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized
files	包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表
items (只读)	提供一个包含所有拖动数据列表的 DataTransferItemList 对象
types (只读)	提供一个 dragstart 事件中设置的格式的 strings 数组。

方法	说明
setData(format, value)	设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。
getData(format)	检索给定类型的数据，如果该类型的数据不存在或 data transfer 不包含数据，则返回空字符串
clearData([format])	删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，则删除与所有类型关联的数据。如果指定类型的数据不存在，或者 data transfer 中不包含任何数据，则该方法不会产生任何效果。