必须在 dragover 事件中调用 preventdefault() 才能触发 drop 事件，否则浏览器默认阻止投放；需结合 getboundingclientrect() 动态判断鼠标坐标是否在目标区域内，仅在此时阻止，避免影响滚动等正常交互。
因为浏览器默认禁止在任意元素上投放拖拽内容，不阻止 dragover 的默认行为，drop 事件就永远不会触发——不是代码没写，而是浏览器直接“静音”了后续流程。
dragover 不阻止，默认就当没这回事
浏览器对拖拽投放极其保守：除非明确告诉它“这里允许放”，否则一律按原生逻辑处理——比如拖文件进来就尝试打开，拖链接进来就跳转。这种默认行为会直接吞掉 drop 事件，连控制台都不会报错，只会光标一直显示“禁止”符号，让人误以为逻辑没跑通。
- 只监听 drop 是无效的，没有 dragover 阶段的 preventDefault()，drop 根本收不到
- 哪怕目标区域是空 div，也得设 min-height 或占位内容，否则高度为 0，鼠标根本“进不去”，dragover 都不会触发
- preventDefault() 必须在 dragover 里调用，drop 里再调一次是保险做法（尤其旧版 Safari）
阻止不是无脑加，得看位置和时机
不能一上来就 e.preventDefault()，否则会影响页面滚动、文本选择等正常交互。真正要限制拖拽区域时，得结合 getBoundingClientRect() 动态判断 clientX/clientY 是否落在合法范围内，只在该区域内才阻止。
- 获取容器边界：
const rect = dropZone.getBoundingClientRect() - 判断坐标：
e.clientX >= rect.left && e.clientX = rect.top && e.clientY - 仅在此条件下调用
e.preventDefault()并设置e.dataTransfer.dropEffect = 'move'
dragstart 也容易漏掉关键动作
光写 draggable="true" 不够，Chrome 和 Safari 要求必须在 dragstart 中至少调用一次 setData，否则拖拽会静默失败。
- 哪怕只是传空字符串：
e.dataTransfer.setData('text/plain', '') - 拖图片或链接时，浏览器可能走内置拖拽逻辑，你的 dragstart 可能压根不执行，需提前测试
- dataTransfer 的类型（如 'text/plain'）必须和 drop 里 getData 的类型严格一致
移动端和跨域有硬限制
原生 drag/drop 在移动端基本不可用，iOS 和 Android 均未实现标准支持；跨域拖拽时 dataTransfer 对象为空，无法读取文件或文本内容。
- 移动端建议改用 mousedown/mousemove/mouseup 或 touchstart/touchmove/touchend 模拟
- 跨域场景下，拖入的文件只能靠 drop 事件捕获，但无法通过 dataTransfer 获取原始信息
- 使用第三方 UI 库（如 Element Plus）时，先确认其 upload 组件是否已封装 dragover/preventDefault 逻辑
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
