html 拖拽事件详细

一、拖拽事件

drag:
触发时机：当用户正在拖动一个元素时，会周期性地触发此事件。
用途：通常用于更新拖动状态或提供视觉反馈。
dragstart:
触发时机：当用户开始拖动一个元素时触发。
用途：设置被拖动的数据和类型，通常在这个事件中调用 setData() 方法。
dragenter:
触发时机：当被拖动的元素首次进入一个可放置的目标元素时触发。
用途：通常用于高亮显示目标区域，提示用户可以在这里放置。
dragover:
触发时机：当被拖动的元素在目标元素上方移动时触发，这个事件会不断触发。
用途：必须在此事件中调用 event.preventDefault() 以允许放置操作；可以设置放置效果（如 copy、move 或 link）。
dragleave:
触发时机：当被拖动的元素离开一个可放置的目标元素时触发。
用途：通常用于恢复目标区域的默认样式。
drop:
触发时机：当用户在目标元素上释放被拖动的元素时触发。
用途：处理实际的放置操作，比如读取拖入的文件、更新DOM结构等。
dragend:
触发时机：当拖动操作结束时触发，无论是在目标元素上放置还是取消拖动。
用途：清理拖动状态，例如移除视觉反馈或重置样式。

二、数据传输对象 (DataTransfer)

DataTransfer 对象是拖放操作的核心，它包含了关于拖动操作的信息，包括拖动的数据类型和实际数据。你可以通过 event.dataTransfer 访问这个对象。
setData(format, data):
设置拖动的数据和格式。format 是数据的 MIME 类型（如 text/plain），data 是要拖动的实际数据。
getData(format):
获取指定格式的拖动数据。如果未找到匹配的数据，则返回空字符串。
clearData([format]):
清除指定格式的拖动数据。如果不指定格式，则清除所有数据。
files:
一个 FileList 对象，包含用户拖入的所有文件。
items:
一个 DataTransferItemList 对象，包含拖动的数据项。每个项都有 kind（string 或 file）和 type 属性。
types:
一个数组，包含所有可用的数据格式。
dropEffect:
设置或获取当前的放置效果。可能的值有 none、copy、move 和 link。
effectAllowed:
设置或获取允许的放置效果。可能的值有 none、copy、copyLink、copyMove、link、linkMove、all 和 uninitialized。