Drag and Drop API是浏览器原生事件机制，支持拖拽投放交互；关键事件含dragstart（设数据）、dragover（需preventDefault）、drop（执行业务）、dragend（清理状态）；基础步骤为设draggable="true"、监听dragover与drop事件。
Drag and Drop API 是浏览器原生提供的一套事件机制，用于实现元素拖拽与投放的交互效果，无需第三方库即可完成文件上传、列表排序、组件布局等常见场景。
核心事件与触发时机
拖放过程由一系列连续事件组成，关键事件包括：
-
dragstart：用户开始拖拽元素时触发，通常在此设置拖拽数据（如
event.dataTransfer.setData()） -
dragover：被拖拽元素在目标区域上方移动时持续触发，需调用
event.preventDefault()才能允许投放 - drop：用户在目标区域释放鼠标时触发，可读取拖拽数据并执行业务逻辑（如插入节点、上传文件）
- dragend：拖拽结束（无论是否成功投放）时触发，适合清理状态
基础实现步骤
让一个元素可拖、另一个元素可接收，只需三步：
- 给可拖元素添加
draggable="true"属性（仅对 - 监听
dragstart，设置dataTransfer中的类型和内容，例如：event.dataTransfer.setData('text/plain', 'item-123') - 给投放区绑定
dragover和drop，其中dragover必须阻止默认行为，否则drop不会触发
处理文件拖放上传
当用户将本地文件拖入网页时，dataTransfer.files会包含FileList对象：
- 在
drop事件中获取event.dataTransfer.files - 可用
FileReader读取内容，或直接构造FormData配合fetch上传 - 注意校验文件类型和大小，避免意外上传过大或不支持格式的文件
注意事项与兼容性
虽然主流浏览器均支持，但仍有细节需留意：
-
dataTransfer只在拖放事件中有效，不能跨事件保存引用 - 移动端默认不支持原生拖放，需借助
touch事件模拟或使用专门库（如interact.js） - 部分浏览器对
setData的 MIME 类型校验较严，推荐使用'text/plain'或'text/uri-list'等通用类型 - 视觉反馈很重要，可通过
dragenter/dragleave动态添加 CSS 类来高亮投放区
