dragenter和dragleave触发需被拖元素超50%面积进入或离开目标区域，非边界即触；dragover必须preventDefault()并设dropEffect才允许drop触发。
dragenter 和 dragleave 触发有面积阈值，不是“一进一出”就立刻响应
这两个事件不是鼠标坐标刚跨过边界就触发，而是依赖被拖元素在目标区域内的「可视面积占比」。实测中，只有当被拖元素超过 50% 的面积进入目标元素时，dragenter 才会触发；同理，dragleave 要等到该面积比例降到 50% 以下才发生。这导致嵌套容器场景下容易误判——比如目标区里有个子 div，拖拽经过它时可能反复进出，引发多余 class 切换。
常见错误是只监听外层容器，却没阻止子元素的事件冒泡：
- 给子元素加
event.stopPropagation()，避免其dragenter冲突父级逻辑 - 视觉反馈建议用
data-drag-over="true"这类属性切换，而非直接操作 class，方便 CSS 控制作用域 - 不要在
dragenter里做 DOM 查询或计算布局，它可能和dragover一起高频触发
dragover 必须调用 preventDefault()，否则 drop 永远不会触发
dragover 的浏览器默认行为是「拒绝投放」，所以即使你绑了 drop 监听器，只要没在 dragover 中调用 e.preventDefault()，鼠标松开时只会触发 dragend，而 drop 完全静默。这不是兼容性问题，是规范强制要求。
还要注意两个配套设置：
立即学习“前端免费学习笔记（深入）”；
-
e.dataTransfer.dropEffect必须设为"move"、"copy"或"link"，且需与源端effectAllowed匹配，否则部分浏览器（如 Safari）仍会禁用投放 - 避免在
dragover回调里执行重绘操作（如修改style.transform），它每秒可能触发 30–60 次，极易卡顿 - 如果目标区是空
div，记得设最小宽高或min-height: 20px，否则没有可触发区域
drop 事件中读取数据要匹配 setData 时的 MIME 类型
drop 里不能直接访问 e.dataTransfer.text 或类似简写属性。所有数据必须通过 e.dataTransfer.getData("text/plain") 显式读取，且类型字符串必须和 dragstart 中 setData("text/plain", "xxx") 的第一个参数完全一致——大小写敏感，多一个空格都不行。
文件拖入是例外：从桌面拖文件进浏览器时，e.dataTransfer.files 可直接访问，但此时 dragstart 和 dragend 不会触发，getData 也返回空字符串。
- 推荐统一用
"text/plain"存 ID 或 JSON 字符串，比自定义类型更稳妥 - 如果存的是结构化数据，先
JSON.stringify()再setData，drop里再JSON.parse() - 不要在
drop中直接操作e.target的子节点顺序，应先e.preventDefault()，再处理逻辑
drop 不代表操作成功，要靠 dropEffect 和业务逻辑双重判断
drop 事件只表示“用户松开了鼠标”，不代表数据已正确落位。比如用户拖着 A 元素到 B 区域，但你的逻辑判断 B 不允许接收 A，这时仍会触发 drop，只是后续没做任何事——用户会以为失败了，其实根本没报错。
真正可靠的完成信号来自两处：
-
e.dataTransfer.dropEffect的值：如果是"none"，说明投放被 UI 层拒绝（比如图标变禁止符号），应视为取消 - 业务层显式确认：比如移动元素后检查
newParent.contains(draggedEl)是否为 true - 别依赖
dragend做收尾——它在任意拖拽结束时都触发，包括中途按 Esc 或拖出窗口，和是否 drop 无关
