dragover 事件未阻止默认行为是拖拽失效的最常见原因，必须在每次 dragover 中调用 event.preventdefault()；drop 只触发于松手时鼠标正下方的元素，需确认目标元素尺寸、遮挡及事件绑定位置；文件读取仅限 drop 回调中的 event.datatransfer.files。
dragover 事件没阻止默认行为，拖拽直接失效
浏览器对 drop 区域有默认限制：不显式阻止 dragover 的默认行为，就根本不会触发 drop。这是最常被忽略的“静默失败”原因。
- 必须在
dragover回调里写event.preventDefault()，光监听没用 - 只阻止
dragenter不够，dragover每几十毫秒触发一次，每次都要阻止 - 如果用了事件委托，确保事件真的冒泡到了绑定节点（比如父容器没设
pointer-events: none）
drop 事件绑定在了错误的 DOM 节点上
drop 只会触发在用户松手时鼠标指针正下方的那个元素上，不是整个页面、也不是父容器自动继承——这点和 click 完全不同。
- 检查目标元素是否设置了
height和width（空 div 默认高为 0，拖进来没反应） - 确认没有被其他元素遮挡（比如绝对定位的蒙层、z-index 更高的兄弟节点）
- 用 Chrome DevTools 的 “Elements → hover 元素” 实时看松手瞬间鼠标落在哪个节点上
DataTransfer 对象读取时机或方式错误
文件只能在 drop 事件回调里通过 event.dataTransfer.files 读取，且仅此一次。提前或延后访问都会是空或报错。
-
event.dataTransfer.items和.files是两套 API：前者支持目录递归，后者只返回扁平文件列表 - 不要在
dragenter或dragover里尝试读files，此时浏览器禁止访问 - IE11 不支持
dataTransfer.files，需降级用dataTransfer.mozFiles（Firefox）或检测兼容性
HTML 属性 missing 或 CSP 策略拦截
部分浏览器（尤其 Safari 和旧版 Edge）要求目标元素显式声明 draggable="true" 才能成为有效拖放源；而 CSP 的 script-src 若限制过严，可能让内联事件监听器失效。
立即学习“前端免费学习笔记（深入）”；
- 确保目标区域没有
draggable="false"或 CSS-webkit-user-drag: none - 若用内联
ondrop="handleDrop(event)"，检查 CSP 是否禁用了内联脚本 - Safari 对
drop的dataTransfer访问更保守，建议统一用event.preventDefault()+event.dataTransfer.files组合
真正卡住的时候，90% 是 dragover 没阻止默认行为，剩下 10% 是松手那一帧鼠标没落在你以为的 DOM 上——别猜，打开 DevTools 的 event listener 面板，盯着 dragover 和 drop 是否真的触发。
