文件拖拽失效主因是dragover未调用event.preventDefault()，其次为松手时鼠标未落在绑定drop事件的DOM节点上；需确保目标元素有宽高、事件能冒泡、禁用干扰扩展，并在drop回调中及时读取dataTransfer.files。
文件拖拽失效，90% 是 dragover 事件没调用 event.preventDefault()，剩下 10% 是松手瞬间鼠标根本没落在你绑定事件的 DOM 节点上——别猜，直接开 DevTools 看。
dragover 不阻止默认行为，drop 根本不触发
浏览器对文件拖入有强默认行为：松手就打开图片、下载 ZIP、预览 PDF。只要 dragover 回调里没写 event.preventDefault()，drop 就永远不会执行，连 console.log 都不会打出来。
-
dragenter里阻止不够，dragover每几十毫秒触发一次，每次都要调用preventDefault() - 如果用了事件委托（比如绑在父容器），确认事件能冒泡上来——检查父级是否设了
pointer-events: none或被z-index更高的蒙层遮挡 - Safari 对
dragenter更敏感，建议两个事件都加preventDefault()
drop 绑定位置错了，松手时根本没命中
drop 只触发在松手那一帧鼠标正下方的元素上，不是父容器、不是空 div、也不继承——和 click 完全不同。
- 目标元素必须有明确宽高：
div默认高度为 0，拖进来毫无反应；加min-height: 100px或border: 1px dashed直观验证 - 用 Chrome DevTools 的 Elements 面板悬停查看，松手瞬间看高亮的是哪个节点
- 检查是否有绝对定位的兄弟元素或伪元素（如
::before）意外覆盖了 drop 区域
dataTransfer.files 访问时机或方式错误
文件只能在 drop 回调里通过 event.dataTransfer.files 读取，且仅此一次。提前（dragenter）、延后（异步 setTimeout）、或跨作用域访问都会是空。
- 别碰
event.dataTransfer.items：Safari 里getAsFile()常返回null；types只是字符串列表，不能读内容 -
files是标准FileList，和一致，但不是深拷贝——跨窗口拖拽可能为空，务必先判空：if (!files.length) return - IE11 不支持
dataTransfer.files，需降级用dataTransfer.mozFiles（Firefox）或做兼容检测
浏览器扩展、协议或权限拦住了拖拽
本地开发时常见静默拦截，页面脚本完全没机会运行。
- 禁用所有浏览器扩展（尤其 uBlock Origin、Tampermonkey、NoScript），再试；逐个启用定位冲突源
- 若页面跑在
file://协议下（双击打开 HTML 文件），现代浏览器会禁用拖放 API；改用http://localhost启动本地服务器（如npx serve） - 检查站点权限：DevTools → Application → Site Settings → Permissions → 确认
Drag and drop和Clipboard是Allow，不是Block
真正卡住的时候，优先打开 DevTools 的 Event Listener 面板，盯着 dragover 和 drop 是否真的触发——其他都是次要线索。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
