必须在目标元素 dragover 事件中调用 e.preventdefault()，否则 drop 不会触发；动态渲染需每次重新绑定；safari 需设 datatransfer.effectallowed="move"；应传 application/json 结构化数据而非 text/plain；避免 dragstart 中操作 dom；移动端需 pointer 事件 fallback；嵌套列表需用 closest 判断落点并设子元素 draggable="false"。

dragover 不阻止默认行为，drop 就永远不会触发

这是所有初学者卡住的第一关。只要 drop 事件没反应，90% 是因为没在目标元素上对 dragover 调用 e.preventDefault()。

原因很直接：浏览器默认禁止在任意元素上投放内容，dragover 的默认行为就是拒绝放置 —— 不阻止它，drop 根本不会被调度。

• 必须在目标容器的 dragover 事件处理器中写 e.preventDefault()
• 只写一次不够：如果目标区域是动态渲染的（比如 Vue/React 列表），每次挂载后都要重新绑定
• Safari 对 dataTransfer.effectAllowed 更敏感，建议同步设为 "move" 避免静默失败

列表排序不能只靠 dataTransfer.setData("text/plain", ...)

用 text/plain 传字符串 ID 看似简单，但在真实列表交互中会立刻暴露问题：无法区分同 ID 多个实例、无法携带位置索引、无法支持嵌套结构。

真正可维护的做法是传递结构化元数据：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 用 e.dataTransfer.setData("application/json", JSON.stringify({id, index, listId}))
• 在 drop 里用 JSON.parse(e.dataTransfer.getData("application/json")) 还原
• 避免在 dragstart 中直接操作 DOM（比如 cloneNode），否则拖拽中状态易错乱
• 移动端不触发 drag 系列事件，需 fallback 到 pointerdown/move/up 模拟

拖拽排序和普通列表交互的核心冲突点

列表交互（如点击展开、右键菜单、键盘导航）默认依赖稳定 DOM 结构和焦点管理；而原生拖拽 API 在拖动时会临时移除源元素视觉反馈、强制重绘光标、甚至中断 focus 流程。

常见冲突现象包括：

• 拖拽过程中，键盘 Tab 焦点跳转失效或错位
• Vue/React 列表用 v-for/map 渲染时，key 未与拖拽 ID 对齐 → 排序后 DOM 错乱
• 目标区域监听了 dragleave 做高亮退出，但子元素（如按钮、图标）触发冒泡导致误判离开
• 未在 dragend 中清理临时样式（如 opacity: 0.5），影响后续交互

嵌套列表拖拽时 drop 事件常被父容器吞掉

当列表项内含可拖拽子项（比如任务卡片里有标签、附件），drop 很容易落在父 li 上却触发了外层看板容器的逻辑 —— 因为事件捕获阶段没做隔离。

解决方式不是阻止冒泡，而是精准判断目标：

• 在 drop 事件里用 e.target.closest(".list-item") 明确落点是否为有效排序单元
• 给子级可拖拽元素（如标签）显式设置 draggable="false"，防止意外触发源事件
• 对嵌套层级超过 2 层的结构，改用模拟拖拽（mousedown + mousemove）更可控
• Chrome 和 Firefox 对嵌套 drop 的事件路径处理一致，但 Safari 可能跳过中间容器，务必实测

原生拖拽 API 的边界非常清晰：它只管“拖”和“放”的信号，不管“怎么排”“排哪去”“排完怎么存”。列表交互的复杂性全在状态同步、DOM 稳定性和用户预期上 —— 这些地方不手动兜底，光靠 draggable="true" 和几个事件监听，撑不过两个迭代。

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