drop事件不触发是因为目标元素未监听dragover事件或未在其中调用preventDefault()；必须同时满足监听dragover并阻止默认行为、元素允许接收拖放两个条件。
拖放功能在 JavaScript 中不是靠单个 API 实现的，而是由 dragstart、dragover、drop 等一整套事件协同完成；漏掉 dragover 的默认行为阻止，drop 根本不会触发。
为什么 drop 事件不触发？
这是最常卡住的地方：浏览器对 drop 有严格前置条件。只有目标元素同时满足两个条件，drop 才会派发：
-
dragover事件被监听，并且在其中调用了event.preventDefault() - 该元素本身允许接收拖放（例如不是默认不可交互的
div，但更关键的是事件拦截逻辑）
没写 preventDefault()，drop 就静默失效——连调试器都看不到它触发。
dragstart 和 dataTransfer 是怎么配合的？
dragstart 是拖拽源头的起点，所有要传递的数据都得塞进 event.dataTransfer：
- 只能用
setData('text/plain', ...)或setData('text/uri-list', ...)等有限 MIME 类型，不能直接传对象或 DOM 节点 - 如果想传自定义标识（比如
item-id-123），就用字符串序列化：event.dataTransfer.setData('text/plain', 'todo:123') -
dataTransfer.effectAllowed可设为'move'/'copy'，影响光标样式，但不强制约束行为
别试图在 dragstart 里存引用，dataTransfer 是跨上下文的剪贴板式传输，只认序列化数据。
如何让非链接/图片元素支持拖拽？
默认只有 、 可拖，其他元素需手动开启：
- 给目标元素设置
draggable="true"属性（HTML 属性，不是 JS 属性） - 必须绑定
dragstart事件，哪怕空函数：el.addEventListener('dragstart', () => {})，否则拖拽无法启动 - 若用 CSS 设置了
user-select: none，可能干扰拖拽起始判定，可临时放开或加-webkit-user-drag: element
移动端不支持原生 drag/drop 事件，这点容易被忽略——真要做跨端，得换 touchstart/move/end + 位置计算方案。
drop 里怎么拿
drop 事件中从 event.dataTransfer 读取，但注意时机和类型：
- 必须在
drop回调内调用getData('text/plain')，提前或延后都拿不到 - 如果源头用
setData('application/json', ...)，这里要严格匹配类型名，大小写敏感 - 文件拖入时走
event.dataTransfer.files（FileList），和文本数据互不干扰
别忘了在 dragenter 或 dragover 中检查 event.dataTransfer.types 判断是否接受该类数据，避免无效区域响应。
