drop事件不触发是因为浏览器默认阻止投放，必须在dragover事件中调用event.preventDefault()；三者分工明确：dragstart设数据、dragover启用投放、drop执行逻辑。
JavaScript 实现拖放功能，核心在于正确绑定和处理 dragstart、dragover、drop 这三个事件；缺一不可，且 dragover 必须调用 event.preventDefault()，否则 drop 事件根本不会触发。
为什么 drop 事件不触发？
这是最常见卡点：浏览器默认会阻止 drop 行为，除非显式告诉它“允许投放”。关键不是“监听了 drop”，而是“让 drop 可以发生”。
-
dragover事件必须被监听，并在回调中执行event.preventDefault() - 仅靠
drop或dragenter监听无法启用投放区域 - 如果目标元素是
<div>等非可拖放原生元素，还必须设置draggable="true"（对源）和ondragover/ondrop属性或通过 JS 绑定（对目标）
dragstart、dragover、drop 三者分工是什么？
它们各自承担明确职责，顺序固定，不可替代：
-
dragstart：在被拖拽元素上触发，用于设置拖拽数据（event.dataTransfer.setData()），比如event.dataTransfer.setData('text/plain', 'item-123') -
dragover：在投放目标上持续触发（每几十毫秒一次），只做一件事——event.preventDefault()+ 可选地设置event.dataTransfer.dropEffect -
drop：在目标上触发一次，从event.dataTransfer.getData()取出数据，执行实际逻辑（如移动 DOM、更新状态）
如何避免常见兼容性/行为陷阱？
看似简单，但几个细节不注意就会失效：
立即学习“Java免费学习笔记（深入）”；
- 不要依赖
dragenter或dragleave判断是否悬停——它们触发不稳定，尤其跨子元素时；判断悬停应基于dragover频率或自定义状态标记 -
dataTransfer只支持字符串类型（'text/plain'、'text/html'、'application/json'等 MIME 类型），不能直接传对象或 DOM 节点；需序列化，如JSON.stringify({id: 1}) - 移动端不支持原生 drag & drop API，需用
touchstart/touchmove模拟，或引入interact.js等库 - 若拖拽源是图片或链接，浏览器有默认行为（打开图片、跳转链接），需在
dragstart中event.preventDefault()阻止
const draggable = document.getElementById('item');
const droppable = document.getElementById('box');
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'my-item-id');
e.dataTransfer.effectAllowed = 'move';
});
droppable.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键！否则 drop 不会触发
e.dataTransfer.dropEffect = 'move';
});
droppable.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
console.log('Dropped:', id);
droppable.appendChild(draggable); // 实际操作
});
真正容易被忽略的是：即使你绑定了所有事件，只要漏掉 dragover 中的 preventDefault()，整个流程就静默失败——控制台无报错，drop 就像没写一样。这个限制是浏览器硬性策略，没有绕过方式。
