要让多个列表之间能互相拖拽排序，关键是统一配置 group 选项使列表属于同一逻辑分组，并确保所有容器 dom 已挂载、onend 中按 evt.from/evt.to 精准更新对应数据数组，同时添加 .sortable-ghost 和 .sortable-chosen 样式保障视觉反馈与布局兼容。
要让多个列表之间能互相拖拽排序，关键不是单独初始化每个列表，而是让它们属于同一个逻辑分组，并正确同步数据状态。
统一 group 配置是跨列表拖拽的前提
SortableJS 通过 group 选项识别哪些列表可以互相交换项。所有参与拖拽的列表必须使用完全相同的 group 名称（字符串），且不能只设在部分实例上。
- group 值需为字符串，如
"task-board"，不能是对象或布尔值 - 所有目标列表都要传入同一份配置对象（推荐复用变量），避免漏配
- 若某列表漏写 group 或值不一致，它将变成“孤岛”，无法与其他列表交互
确保 DOM 元素有效且已挂载
每个列表容器必须是真实、已插入文档的原生 HTMLElement。常见失败点：
- 脚本执行过早，
document.getElementById返回 null —— 放在DOMContentLoaded或框架的onMounted/useEffect中 - 误传字符串选择器（如
'#list1'）或 jQuery/React ref —— 必须先查 DOM 再传入 - Vue/React 中容器由条件渲染（v-if / &&）控制，初始化时可能不存在 —— 加空值判断或监听显示状态
拖拽后精准更新对应的数据数组
onEnd 回调中不能只靠索引操作一个全局数组。必须根据 evt.from 和 evt.to 判断来源与目标容器，再操作对应的数据源：
- 为每个列表容器建立映射关系，例如用
data-list-id="todo"属性标记，再通过evt.from.dataset.listId获取来源列表名 - 从源数组删除元素：
sourceArray.splice(evt.oldIndex, 1)[0] - 插入目标数组：
targetArray.splice(evt.newIndex, 0, item) - 避免直接修改 DOM 或拼接 innerHTML —— 数据驱动 UI 才能保持一致性
视觉反馈与布局兼容性
没有基础样式，拖拽过程会失去占位和高亮，Safari 或 Flex/Grid 布局下还可能错位：
- 至少定义
.sortable-ghost（拖拽中占位）和.sortable-chosen（被选中项）的 CSS - Flex 容器需确保子项不设
flex: none或固定尺寸冲突；Grid 容器避免显式grid-column定位 - 父容器若为
position: static，ghost 元素可能脱离流 —— 建议加position: relative
