必须在 dragover 中调用 preventDefault() 才能启用高亮，否则 dragenter/dragleave 不稳定；需用 contains() 校验 dragleave 真实离开容器，并配合 dropEffect 与 CSS 过渡实现可靠视觉反馈。

dragover 里不调 preventDefault()，高亮根本不会生效

浏览器默认会忽略绝大多数元素的 drop 行为，包括视觉反馈。只要没在 dragover 事件中调用 event.preventDefault()，dragenter 和 dragleave 就不会稳定触发，你加的 classList.add('highlight') 也就形同虚设。

常见错误现象：拖文件到区域边缘时偶尔闪一下高亮，但拖进去就消失；或者完全没反应，用户以为功能坏了。

• dragenter 只触发一次，不能靠它维持高亮状态
• dragover 高频触发，适合实时更新样式（比如加 class="drag-over"）
• 必须同时监听 dragleave 并清除类，否则鼠标斜着划出区域时样式会卡住
• CSS 中用 :hover 无效——拖拽状态下不触发伪类

子元素存在时 dragleave 会误触发，得校验 relatedTarget

如果拖拽区域内部有子元素（比如带文字提示的 <p></p> 或图标），dragleave 会在进出子元素时反复触发，导致高亮频繁闪烁甚至提前消失。

真正该判断的是：鼠标是否真的离开了整个目标容器，而不是刚从一个子元素挪到另一个子元素。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• 在 dragenter 中记录 e.target（或更稳妥地用 e.currentTarget）
• 在 dragleave 中检查 e.relatedTarget 是否仍在目标容器内：!dropArea.contains(e.relatedTarget)
• 避免用全局变量如 window.lastenter，容易被并发拖拽干扰
• 推荐写法：if (!dropArea.contains(e.relatedTarget)) { dropArea.classList.remove('highlight'); }

dropzone 的视觉反馈要兼顾光标与样式协同

仅改背景色或边框不够，用户需要多维线索确认“这里能放”。原生光标变化是关键信号，且必须和业务逻辑一致。

• 在 dragover 中设置 event.dataTransfer.dropEffect = 'copy'（或 'move'），浏览器会自动切换光标
• 别在不允许放置的区域强行设 cursor: default——这破坏用户对系统规则的预期
• 加 CSS 过渡让高亮更柔和：transition: background-color 0.2s ease, border-color 0.2s ease;
• 确保目标区域不是 display: none 或 pointer-events: none，否则事件收不到

文件拖拽区域不能只靠 dragenter/dragleave 绑定

很多教程示例只监听这两个事件，看起来能跑，但一加子元素或嵌套结构就失效。真实场景下必须三者配合，且顺序和职责要分清：

• dragenter：首次进入时添加高亮类 + 设置 preventDefault()
• dragover：持续阻止默认行为（核心！）+ 可选更新光标或位置反馈
• dragleave：用 contains() 校验后才移除高亮类
• 所有事件监听都需绑定在同一个目标容器上，不要分散到子元素

拖拽高亮看似简单，真正难的是边界情况处理——特别是嵌套结构、快速进出、多文件并行拖拽时的状态一致性。别省略 dragover 的 preventDefault()，也别信任 dragleave 的原始触发时机。