必须在 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 模拟拖拽逻辑
• 跨域场景下，只能靠用户主动点击 或 drop 区域触发系统选择器
• 第三方 UI 库（如 Element Plus）的 upload 组件若封装了 drag/drop，务必确认其内部是否已处理 dragover 阻止逻辑

最容易被忽略的是：目标容器没有显式高度或内容占位，导致 dragover 事件根本不会进入监听范围——这时无论你怎么写 preventDefault()，都只是对着空气挥手。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！