必须在 dragover 事件中调用 preventDefault() 才能触发 drop，否则浏览器认定区域不可放置；动态插入的拖放区域需确保 dragover 阻止默认行为，且建议用事件委托绑定；dragstart 中必须调用 setData()，否则部分浏览器不触发后续事件。
dragover 事件里不调 preventDefault() 就别想触发 drop
动态插入的拖放区域（比如用 insertAdjacentHTML 或框架渲染出来的 div）和静态区域在事件机制上没区别，但新手常误以为“只要绑了事件就行”。实际上，dragover 不调 event.preventDefault()，浏览器就认定该区域“不可放置”，后续 drop 根本不会触发——连回调函数都不会进。
必须确保：无论区域是页面加载时存在，还是后续 JS 动态生成，只要它是目标容器，就得在 dragover 中显式阻止默认行为。否则拖文件进来只会打开预览或下载，不是上传。
- 动态区域建议用事件委托绑定到父容器，避免重复绑定或漏绑
- 不要只监听
drop，漏掉dragover的preventDefault()是最常见上传失败原因 -
dragenter可用来加高亮样式，但不是必需；dragleave容易因鼠标微移误触发，初学者可先不处理
动态元素怎么设 draggable="true" 才有效
动态生成的可拖动项（比如列表里的 <li> 或卡片），不能只靠 HTML 字符串写死 draggable="true" 就完事。部分浏览器在用 innerHTML 插入时，会忽略该属性的初始状态，尤其当内容含脚本或复杂结构时。
稳妥做法是：插入后立即用 JS 显式设置属性，并补上 dragstart 监听器。
立即学习“前端免费学习笔记（深入）”；
- 用
element.setAttribute('draggable', 'true')比直接写字符串更可靠 -
dragstart中必须调event.dataTransfer.setData()，哪怕只传个空字符串，否则某些浏览器认为“无数据可拖”，不触发后续事件 - 如果用框架（如 Vue/React），注意属性绑定语法是否真正渲染出原生
draggable属性，而不是仅加了个 class
用 FormData 传动态生成的多文件要注意字段名一致性
动态拖放区域可能支持单次拖入多个文件，也可能允许多次拖放累积上传。这时候 FormData.append() 的字段名设计直接影响后端接收逻辑。
常见错误是每次拖放都用不同字段名（比如 'file-1'、'file-2'），导致后端要写一堆条件判断；或者用数组语法但没加 []，结果只收到最后一个文件。
- 统一用
formData.append('files[]', file)，后端能按数组解析（PHP/Node.js/Python Flask 都认这种命名） - 若需保留原始文件名或额外元数据，可在
FormData中额外 append 字段，如formData.append('filenames[]', file.name) - 避免在循环中重复创建
FormData实例——应一次构建好再发请求，否则并发上传容易错乱
拖放上传失败时，dataTransfer.files 为空的几个真实原因
拿到 event.dataTransfer.files 却是空 FileList，不是代码写错了，而是底层被拦截了。这在动态内容场景下更隐蔽：
- 用户拖的是文件夹而非文件（Safari 和旧版 Chrome 默认不支持文件夹拖放，
files为空） - 拖入的是桌面快捷方式（.lnk/.applescript 等），不是真实文件，
dataTransfer.items可能有 entry，但files为空 - 页面有 iframe 或 shadow DOM，事件对象的
dataTransfer在跨上下文时被清空（尤其动态插入的区域嵌在 web component 里） - 移动端 Safari 完全不支持
drop事件读取文件，files永远为空——得降级用<input type="file">
真正在意上传成功率，就得在 drop 回调开头加一行 if (!e.dataTransfer?.files?.length) return;，再配个友好的提示，而不是让整个流程静默失败。
