原生 draggable 在虚拟列表中失效，因虚拟列表动态卸载 dom 节点导致 dragstart 绑定失败、drop 时 target 失效；应改用 touch/mouse 事件模拟拖拽，通过 state 驱动排序更新与 ui 反馈。

原生 draggable 在虚拟列表里基本不可用——不是兼容性问题，是设计冲突：虚拟列表靠动态渲染可视区域 DOM，而拖放 API 依赖真实、稳定、可被事件捕获的节点。一旦列表项被卸载（比如滚动出视口），dragstart 就可能绑不上，drop 时 e.target 更可能指向空白容器或已销毁节点。

为什么虚拟列表 + 原生 draggable 会失效

虚拟列表的核心是「按需挂载/卸载」，但拖放事件链要求源节点全程存活、目标节点始终可访问。常见崩坏点：

• dragstart 绑在动态生成的 li 上，滚动后该节点被 remove()，事件监听器随之消失
• 用户拖着元素滚动，目标区域重绘，新渲染的 li 没绑定 dragover/drop，事件直接漏掉
• dataTransfer.setData() 传的是 dataset.id 还算安全，但若传了 e.target 引用或 innerHTML，虚拟列表重渲染后内容已变，getData() 拿到的是过期快照
• 移动端完全不触发 dragstart，而虚拟列表常用于长列表场景，等于直接放弃 iOS/Android 主流用户

替代方案：用 touch/mouse 事件模拟拖放逻辑

绕过原生 API，自己接管「按下→移动→释放」全流程，配合虚拟列表的 state 更新机制。关键不是“怎么拖”，而是“怎么让排序结果同步到数据源”：

Baoyu Markdown To Html

将 Markdown 转换为微信兼容的样式化 HTML，支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...

下载

• 在 touchstart 或 mousedown 中记录起始索引（来自 item 的 data-index），并标记 isDragging = true
• touchmove/mousemove 中节流计算当前鼠标/手指 Y 坐标，对比每个可视项的 getBoundingClientRect()，判断是否跨过中线 → 得到目标索引
• 不操作 DOM，只更新排序后的数组（例如用 Array.splice() 移动元素），触发虚拟列表重新渲染
• touchend/mouseup 后清状态，避免残留
• 视觉反馈靠 CSS class 控制：给正在拖的项加 opacity: 0.6，给插入位置前后加 border-top/bottom: 2px dashed #007bff

框架内更推荐状态驱动而非 DOM 驱动

React/Vue/Svelte 等框架下，硬套原生 drag/drop 是反模式。正确路径是：

• 把拖拽视为一种「临时编辑态」：按下时存 draggedIndex，移动时计算 hoveredIndex，释放时 commit 排序变更
• 所有 UI 反馈（高亮、插入线、禁用滚动）都由 state 控制，不依赖事件目标节点是否存在
• 虚拟列表组件（如 react-window、vue-virtual-scroller）提供 overscanCount 和 itemKey，确保拖拽过程中目标项大概率已在内存中，减少 closest() 失败概率
• 如果必须用原生 API（比如对接旧系统），至少把 dragstart 和 drop 监听器挂在虚拟容器根节点上，用 e.target.dataset.index 取值，而不是依赖 e.target 是不是 li

最易被忽略的一点：虚拟列表滚动时的惯性会干扰拖拽坐标判断。别只看 e.clientY，得结合 container.scrollTop 和当前帧的 requestAnimationFrame 时间戳做补偿，否则快速滚动中松手，目标位置偏差可能达数屏。

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