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 类来高亮投放区