虚拟滚动拖拽排序需数据驱动、最小更新、视觉降级——只改数组顺序、节流 dragover、用 CSS 伪元素模拟插入线、异步提交大批量变更，十万级列表可流畅运行。
虚拟滚动本身不直接支持拖拽排序，但可以与拖拽逻辑解耦协作——核心思路是：只在可视区域内渲染真实 DOM 节点，拖拽状态和排序逻辑由数据层驱动，DOM 更新按需触发，避免全量重排。
保持数据与视图分离，用 index 映射代替 DOM 位置操作
拖拽排序的本质是数组项顺序变更，不是 DOM 节点移动。虚拟滚动列表应始终基于一个有序的数据源（如 items: Array
- 记录拖拽起始项的原始 dataIndex（非 DOM 索引），而非
event.target的位置 - 悬停目标时，根据鼠标 Y 坐标反算应插入的 targetIndex（结合 itemHeight 和 scrollTop）
- 执行
items.splice(targetIndex, 0, ...items.splice(dragIndex, 1))，保证单次变更原子性 - 禁止对虚拟容器内的 DOM 调用
insertBefore或appendChild—— 这会破坏滚动一致性
防抖+节流拖拽事件，规避高频位置计算开销
在大量元素场景下（如 10 万条），dragover 可能每秒触发数十次。直接计算插入位置会导致 layout thrashing 和重复二分查找。
- 对
dragover使用 16ms 节流（≈60fps），或更激进的 50ms 防抖（用户感知无延迟） - 将 scrollTop + clientY → index 的映射封装为纯函数，避免重复获取
getBoundingClientRect() - 缓存可视区域的 itemHeight（若为动态高度，用平均值或预估高度过渡，排序完成后再异步修正）
视觉反馈轻量化：仅高亮插入位，禁用实时 DOM 插入
传统拖拽中“插入线”常通过临时 DOM 元素实现，但在虚拟滚动中会强制重绘整个窗口。应改用 CSS 层叠与伪元素模拟。
- 在虚拟容器上用
::before绘制一条横线，top 值由当前 targetIndex * itemHeight + offset 动态计算 - 被拖拽项用 transform: translate3d() 脱离文档流，避免影响布局计算
- 禁用
dragImage（尤其在 Chrome 中易引发卡顿），改用半透明占位图标 + 文字标签 - 插入线只在 targetIndex 发生变化时更新，而非每次 dragover
大数据量下的批量更新保护：冻结渲染 + 异步提交
当一次拖拽导致数百甚至上千项索引偏移（如把首项拖到末尾），直接更新数组并触发 diff 可能引发长任务阻塞主线程。
- 启用“冻结模式”：拖拽开始时暂停虚拟滚动的 scroll listener 和 render scheduler
- 排序操作在内存中完成，不触发任何 UI 更新；仅维护一个 pendingSort 标志
- 拖拽结束（
drop）后，用requestIdleCallback或setTimeout(..., 0)异步提交变更，让出主线程给用户交互 - 若排序跨度 > 1000 项，可拆分为多次微任务（如每 200 项一批），配合
await new Promise(r => setTimeout(r, 0))避免饥饿
不复杂但容易忽略：虚拟滚动的性能瓶颈不在渲染本身，而在拖拽过程中频繁的 layout 查询与同步 DOM 操作。守住“数据驱动、最小更新、视觉降级”三原则，十万级列表也能流畅拖拽排序。
