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 这四个事件用于目标区域响应
它们在潜在的放置目标（如 <div class="drop-zone">）上监听，但有两个关键前提：
<ul>
<li>必须对 <code>dragenter 和 dragover 调用 event.preventDefault()，否则浏览器默认禁止放置
dragover **必须阻止默认行为**，否则 drop 事件根本不会触发（这是最常踩的坑）drop 中通过 event.dataTransfer.getData('text/plain') 取回数据，再做插入、移动等操作dragleave 适合用于移出时取消高亮等视觉反馈为什么 drop 事件不触发？检查这三点
90% 的“拖不动/放不了”问题都卡在这几个地方：
立即学习“Java免费学习笔记（深入）”；
- 目标元素没监听
dragover，或监听了但没调用event.preventDefault() - 被拖元素没设
draggable="true"属性（注意：仅 HTML 元素有效，div、img等默认不可拖，input、a默认可拖但行为受限） -
drop元素本身是空的、高度为 0 或被其他元素遮挡（需确保它有可命中区域）
实际写法示例：一个最小可用拖放片段
以下代码实现把一个 <span></span> 拖进 <div id="target">：
<pre class='brush:php;toolbar:false;'><span draggable="true" id="item">拖我</span>
<div id="target" style="min-height: 60px; border: 1px dashed #999;">放下区</div>
<script>
document.getElementById('item').addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', 'item-123');
});
const target = document.getElementById('target');
target.addEventListener('dragenter', e => e.preventDefault());
target.addEventListener('dragover', e => e.preventDefault()); // 必须！
target.addEventListener('drop', e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
target.textContent = `已放入：${id}`;
});
</script></pre>
<p>注意：<code>dragenter 和 dragover 都要 preventDefault，但只有 drop 才需要取数据并执行业务逻辑。跨 iframe、文件拖入、多类型数据（如 Files）支持更复杂，得额外判断 types 和使用 files 属性——这些细节容易被忽略，但一旦涉及上传或富交互就必须面对。
