多列表拖拽占位符的核心是数据映射与DOM占位逻辑：通过唯一标识区分源/目标列表，dragover中动态插入轻量placeholder并实时计算插入索引，drop时同步更新状态数组并触发视图重排。
给多列表拖拽加占位符，核心是让被拖动项在目标列表中“预览”插入位置，同时保持多个列表之间互不干扰、状态清晰。关键不在视觉效果本身，而在拖拽过程中的数据映射和 DOM 占位逻辑。
明确拖拽作用域与目标列表识别
多个列表共存时，必须区分「当前拖拽源」和「潜在目标」。建议为每个列表设置唯一 data-id 或 class（如 list-a、list-b），并在拖拽开始时记录 sourceListId；进入其他列表区域时，通过事件委托监听 dragenter 或 dragover，结合 event.target 判断是否落入有效目标容器内。
- 避免把整个页面设为可拖入区，只允许 drop 在带 data-droppable="true" 的列表上
- 用 event.preventDefault() 在 dragover 中阻止默认行为，否则无法触发 drop
- 可在 dragenter 阶段临时添加 is-over 类，用于高亮当前悬停列表
动态插入占位符元素（非克隆原项）
占位符不是复制被拖元素，而是一个轻量的、无内容的 DOM 节点（如 <li class="placeholder"></li>），它只负责标出插入点。每次拖动过程中，需实时计算鼠标相对于目标列表子项的位置，决定占位符插在第几个子元素之前。
- 监听 dragover，用 event.clientY 和目标列表内每个子项的 getBoundingClientRect() 做比对，找到最邻近的插入索引
- 若已有占位符，先移除再按新位置重新插入，避免残留
- 占位符样式建议设 height: 24px、border-top: 2px dashed #3498db，视觉上轻且明确
同步更新多个列表的数据结构
DOM 上的占位符只是表象，真正重要的是拖拽结束时，如何把原数据从 sourceList 移出，并按占位符指示的位置插入 targetList。推荐维护一个统一的状态对象（如 Redux store 或响应式 reactive 对象），每个列表对应一个数组。
- 拖拽结束（drop）时，读取 sourceListId 和 targetListId，以及占位符所在索引（可通过 placeholder.previousElementSibling 推算）
- 执行数组操作：从 source 数组 splice 出该项，再在 target 数组的指定索引处 unshift / splice 插入
- 触发视图更新（如 Vue 的 reactivity / React 的 setState），DOM 自动重排，占位符随之消失
处理边界与异常情况
多列表场景下容易出现跨列表误判、快速划过未触发 drop、或拖回原列表等边缘行为，需主动兜底。
- 在 dragleave 中清除当前列表的占位符，但注意节流——同一列表反复进出不重复操作
- 若 drop 发生在非目标区域（如空白处、header），应取消操作并还原 UI
- 支持拖回原列表：当 sourceListId === targetListId 时，按新顺序重组该列表数据，占位符逻辑同样适用
