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获取
常见陷阱与注意事项
拖放看似简单，但容易因细节疏忽导致失败：
立即学习“Java免费学习笔记（深入）”；
- 忘记在
dragover中调用preventDefault()→ 浏览器阻止放置，drop事件永远不会触发 - 未设
draggable="true"→ 任何原生元素（包括div、span）默认不可拖，即使加了事件监听也无效 - 跨 iframe 拖放受限 → 同源 iframe 可行，但需确保双方都正确处理事件；跨域则受安全策略限制
- 移动端不支持原生 Drag API → 需用
touchstart/touchmove模拟，或引入interact.js等兼容库
一个最小可用示例
以下代码实现把一个 div 拖到目标区并复制其文本：
拖我放到这里
不复杂但容易忽略细节。掌握事件时机、dataTransfer 的读写规则和 preventDefault 的必要性，就能稳定实现拖放逻辑。
