拖放排序中实时显示占位符的核心是监听 dragover 流并精确计算插入点：需 preventDefault() 启用放置，用 clientY 与元素边界比对动态插入复用的占位节点，并通过自定义事件解耦逻辑。
拖放排序中实时显示占位符，核心是利用自定义事件配合 dom 位置计算，在元素被拖动时动态插入一个视觉占位节点，并随拖动持续更新其位置。关键不在“触发事件”，而在“监听拖动流 + 精确判断插入点”。
监听拖动过程并阻止默认行为
原生 dragstart、dragover、dragenter、dragend 构成完整拖动生命周期。必须在 dragover 中调用 event.preventDefault()，否则浏览器会禁用放置（drop）能力，导致后续逻辑失效。
-
dragstart：记录被拖项（如 dataTransfer.setData 或直接缓存 DOM 元素引用） -
dragover：必加preventDefault()；在此计算当前悬停位置，决定占位符应插在哪两个真实项之间 -
dragleave（可选）：用于清理临时状态，但通常靠dragover持续刷新更可靠 -
drop：执行真实排序（移动 DOM 或更新数据），随后移除占位符
动态创建和定位占位符节点
占位符不是固定元素，而是每次 dragover 触发时实时创建或复用的空 <div>，带明确样式（如浅灰背景、虚线边框、高度匹配列表项）。
- 首次进入列表区域时创建占位符（避免重复添加），并添加到容器末尾作为占位基底
- 在
dragover中，用event.clientY获取鼠标 Y 坐标，遍历所有可排序项（排除自身和占位符），对比其getBoundingClientRect().top和.bottom - 找到第一个满足
clientY < item.top + item.height / 2的项，就把占位符插入到它前面；若没找到，就插到最后
用自定义事件解耦占位逻辑与业务逻辑
不推荐把位置计算代码散落在事件监听器里。可封装为独立函数，并通过自定义事件通知外部：“占位位置已更新”。
- 定义事件名如
sort-placeholder-updated，携带插入索引index和目标容器container - 在位置判定完成后派发：
container.dispatchEvent(new CustomEvent('sort-placeholder-updated', { detail: { index } })) - 业务层监听该事件，可同步更新虚拟列表状态、高亮对应区域，或触发动画过渡
注意事项与常见坑
占位预览看似简单，实际容易因细节出错：
- 拖动源元素若被设为
opacity: 0或visibility: hidden，getBoundingClientRect()仍返回原始尺寸，但视觉上消失，易造成位置误判 —— 建议用transform: translateZ(0)配合pointer-events: none隐藏拖动源 - 滚动容器内拖动时，
clientY是视口坐标，需减去容器scrollTop才能对齐内部项位置 - 多个列表共存时，确保占位符只在一个容器内生效，可通过
event.target === container过滤 - 移动端无原生 drag API，需用
touchstart/move/end模拟，此时占位逻辑需统一抽象，避免重复实现
