拖拽区域不可用 display: none 或 visibility: hidden 隐藏，否则 dragover/drop 事件失效；应使用 opacity: 0 + pointer-events: none 或移出视口；dragover 中须每次调用 preventDefault()；推荐用 data-drop-enabled 属性标记状态并严格同步。
拖拽区域元素本身要可显隐，不能只靠 CSS visibility
直接用 display: none 隐藏拖拽区域会导致 dragover/drop 事件完全不触发——浏览器在计算可投放目标时会跳过不可见、不可交互的元素。visibility: hidden 同样失效，因为 dragover 的触发依赖元素参与布局且具备 hit-testing 能力。
正确做法是用 opacity: 0 + pointer-events: none 组合隐藏视觉并禁用交互，或用 position: absolute; left: -9999px 移出视口但保留在 DOM 中。若需彻底移除，必须在隐藏前手动解绑事件监听器，否则残留监听可能引发内存泄漏。
- 推荐方案：用 class 切换控制，例如
drop-zone--hidden对应opacity: 0; pointer-events: none; - 避免在
dragstart中动态添加/移除区域元素——此时拖拽影像已生成，新区域无法被识别为有效 drop target - 如果区域由 JS 动态创建（如弹窗内），务必在插入 DOM 后立即绑定
dragover和drop事件
dragover 事件里 preventDefault() 必须每次调用，不能只绑一次
很多人误以为给区域绑定一次 preventDefault() 就够了，其实不然：dragover 是高频连续事件（每几十毫秒触发），浏览器只在「本次事件中调用了 preventDefault()」时才允许后续的 drop。一旦某次没调，drop 就永远被拦截，光标变成禁止符号，且无任何错误提示。
这意味着：即使区域显示状态没变，只要用户还在拖着文件划过，就必须保证每次 dragover 都执行 e.preventDefault()。
- 别写成
element.addEventListener('dragover', e => e.preventDefault(), { once: true })——{ once: true }是致命错误 - 可在 handler 里加条件判断，比如
if (!isDropZoneVisible) return;，但preventDefault()必须出现在允许投放的分支里 - 移动端 Safari 对
dragover的触发更敏感，建议加e.stopPropagation()防止父级干扰
用 data 属性标记区域状态比 DOM 查询更可靠
当多个拖拽区域共存（比如主面板 + 侧边栏上传区），仅靠 event.target 判断是否落在“当前应激活的区域”容易出错——用户可能拖着文件从 A 区划到 B 区，但 B 区尚未显示，dragenter 却已触发。
更稳的方式是在区域元素上预设 data-drop-enabled="true" 或 data-context="project-upload"，然后在 dragover/drop 中检查该属性值，而不是依赖 class 名或 display 计算结果。
- 显示区域时设置：
zone.setAttribute('data-drop-enabled', 'true') - 在事件 handler 中检查：
if (e.target.dataset.dropEnabled !== 'true') return; - 避免用
getComputedStyle(zone).display === 'block'做判断——CSS 可能来自媒体查询或 JS 注入，不可靠
隐藏区域后记得清理 dataTransfer 状态
如果用户已在拖拽过程中，你突然隐藏了所有 drop 区域，dataTransfer 对象仍保留着上次 setData() 的数据，但后续 drop 不会触发。这时候再显示区域，用户松手依然无效——因为浏览器认为这次拖拽“已失效”，不会重试。
真正要做的，是在隐藏区域的同时，主动清除拖拽上下文。虽然没有标准 API 能重置 dataTransfer，但你可以监听 dragend 或 dragleave 后延时清空缓存，并在区域重新显示时重置内部状态标志位。
- 不要依赖
dragend事件来恢复 UI——它在松手后才触发，而用户可能中途取消拖拽（ESC 键或移出窗口） - 建议加一个全局标志：
let isDropZoneActive = false;，在显示区域时设为true，在dragover中只对isDropZoneActive为 true 的区域响应 - 最易忽略的一点：如果区域是通过 Vue/React 等框架控制显隐，确保
data-drop-enabled属性与组件状态严格同步，不要让 DOM 属性滞后于 JS 状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
