JavaScript原生拖放需正确绑定dragstart/dragend/drag和dragenter/dragover/dragleave/drop八事件；关键点：dragstart中必须setData，dragover必须preventDefault，目标元素需有可命中区域。
JavaScript 实现拖放功能不依赖第三方库，但必须正确绑定和处理一整套原生拖放事件，否则会出现“能拖但放不进去”“拖着没反应”“跨元素失效”等问题。
dragstart、drag、dragend 这三个事件控制拖拽生命周期
它们在被拖拽元素（draggable="true" 的元素）上触发：
-
dragstart：拖拽开始时触发，**必须在这里设置dataTransfer数据，否则后续drop拿不到内容**。例如：event.dataTransfer.setData('text/plain', 'my-item-id') -
drag：拖拽过程中持续触发（性能敏感，避免放重逻辑） -
dragend：拖拽结束（无论是否成功放置），适合清理状态或恢复 UI
dragenter、dragover、dragleave、drop 这四个事件用于目标区域响应
它们在潜在的放置目标（如 90% 的“拖不动/放不了”问题都卡在这几个地方： 立即学习“Java免费学习笔记（深入）”； 以下代码实现把一个 注意：
dragenter 和 dragover 调用 event.preventDefault()，否则浏览器默认禁止放置dragover **必须阻止默认行为**，否则 drop 事件根本不会触发（这是最常踩的坑）drop 中通过 event.dataTransfer.getData('text/plain') 取回数据，再做插入、移动等操作dragleave 适合用于移出时取消高亮等视觉反馈
为什么
drop 事件不触发？检查这三点
dragover，或监听了但没调用 event.preventDefault()
draggable="true" 属性（注意：仅 HTML 元素有效，div、img 等默认不可拖，input、a 默认可拖但行为受限）drop 元素本身是空的、高度为 0 或被其他元素遮挡（需确保它有可命中区域）实际写法示例：一个最小可用拖放片段
拖进 拖我
dragenter 和 dragover 都要 preventDefault，但只有 drop 才需要取数据并执行业务逻辑。跨 iframe、文件拖入、多类型数据（如 Files）支持更复杂，得额外判断 types 和使用 files 属性——这些细节容易被忽略，但一旦涉及上传或富交互就必须面对。
