JavaScript拖放功能依赖HTML5 Drag and Drop API，需设draggable="true"并分三阶段处理：dragstart设数据、dragover调preventDefault、drop取数据执行操作。

JavaScript 实现拖放功能主要依靠 HTML5 原生的 Drag and Drop API，它提供了一套语义化事件和属性，让元素可拖、目标区可接收，无需依赖第三方库就能完成基本交互。

拖放功能的核心步骤

要让一个元素可拖，需满足两个前提：一是设置 draggable="true" 属性；二是监听并处理关键事件。整个流程分三阶段：

• 开始拖拽：在被拖元素上监听 dragstart，此时可设置拖拽数据（如文本、URL 或自定义类型），用 event.dataTransfer.setData(type, data)
• 经过目标区：在潜在放置区域监听 dragenter 和 dragover，必须在 dragover 中调用 event.preventDefault()，否则浏览器默认禁止放置
• 释放放置：在目标区监听 drop，通过 event.dataTransfer.getData(type) 获取数据，并执行实际操作（如移动 DOM、更新状态）

dataTransfer 对象的关键要点

dataTransfer 是拖放过程中的数据载体，挂载在所有拖放事件对象上，使用时要注意：

• 支持多种 MIME 类型，常用 "text/plain"、"text/html"，也可用自定义类型如 "application/my-app-item-id"
• 只能在 dragstart 和 drop 中读写；在 dragenter/dragover 中仅可读取 types 列表，不能调用 getData()
• 若需拖拽文件，应监听 dragstart 的同时兼容 dragend 清理资源，但文件本身通常由 drop 事件配合 event.dataTransfer.files 获取

常见陷阱与注意事项

拖放看似简单，但容易因细节疏忽导致失败：

• 忘记在 dragover 中调用 preventDefault() → 浏览器阻止放置，drop 事件永远不会触发
• 未设 draggable="true" → 任何原生元素（包括 div、span）默认不可拖，即使加了事件监听也无效
• 跨 iframe 拖放受限 → 同源 iframe 可行，但需确保双方都正确处理事件；跨域则受安全策略限制
• 移动端不支持原生 Drag API → 需用 touchstart/touchmove 模拟，或引入 interact.js 等兼容库

一个最小可用示例

以下代码实现把一个 div 拖到目标区并复制其文本：

拖我
放到这里

不复杂但容易忽略细节。掌握事件时机、dataTransfer 的读写规则和 preventDefault 的必要性，就能稳定实现拖放逻辑。