必须在 dragover 和 drop 事件中均调用 e.preventDefault()，因 dragover 阶段浏览器已决定是否允许投放，仅 drop 中阻止无效；dragover 还需结合坐标判断目标区域并设置 dropEffect，且容器须有实际尺寸。
必须在 dragover 和 drop 两个事件中都调用 e.preventDefault()，否则浏览器会直接打开图片、预览 PDF 或下载压缩包——你连 drop 事件都收不到。
为什么只在 drop 里阻止默认行为没用
浏览器在 dragover 阶段就决定“是否允许投放”。不阻止，它就把拖入的文件当链接或资源处理：松手瞬间跳转、新开页、下载，drop 根本不会触发。控制台不报错，光标一直显示禁止符号，容易误以为 JS 没绑上。
-
dragover是“准入检查”，必须在这里e.preventDefault()才算开门 -
drop里再调一次是保险做法，尤其旧版 Safari 对时机更敏感 - 只给
drop加preventDefault()等于等门关死了才喊停，晚了
dragover 阻止默认行为的实操要点
不能无脑全局阻止，否则会影响页面滚动、文本选中等正常交互。得判断鼠标是否真在目标区域上方：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先用
getBoundingClientRect()获取目标容器位置 - 再比对
e.clientX/e.clientY是否落在该区域内 - 仅在此条件下调用
e.preventDefault()和e.dataTransfer.dropEffect = 'copy' - 目标元素要有实际尺寸（比如
min-height: 100px），否则dragover压根不触发
移动端和跨域场景下别硬刚原生 drag/drop
iOS 和 Android 均未实现标准 drag/drop 文件操作；跨域拖拽时 dataTransfer 为空，拿不到文件信息。
立即学习“前端免费学习笔记（深入）”；
- 移动端建议改用
touchstart/touchmove/touchend模拟拖拽逻辑 - 跨域场景下，只能靠用户主动点击
<input type="file">或 drop 区域触发系统选择器 - 第三方 UI 库（如 Element Plus）的
upload组件若封装了 drag/drop，务必确认其内部是否已处理dragover阻止逻辑
最容易被忽略的是：目标容器没有显式高度或内容占位，导致 dragover 事件根本不会进入监听范围——这时无论你怎么写 preventDefault()，都只是对着空气挥手。
