防止多列表拖拽跨组混乱，核心是精确控制交互边界：统一group名称（大小写敏感）、按角色配置pull/put权限、禁用事件冒泡、确保前端状态与DOM严格对齐。
防止多列表拖拽跨组混乱，核心在于精确控制交互边界——不是“让所有列表都能互拖”，而是“只允许指定列表之间安全互拖”。关键不在功能开启，而在配置收口。
统一 group 名称是硬性前提
多个列表要支持跨列表拖拽，必须使用完全相同的 group 字符串值。只要有一个列表漏配、拼错或用空值，整个跨组链路就会中断。
- ✅ 正确：两个列表都显式声明
group: 'task' - ❌ 错误：一个写
group: 'task'，另一个没写 group，或写成group: 'Task'（大小写敏感） - ⚠️ 注意：Vue.Draggable 中的
group是字符串，不能传对象或布尔值；Svelte 中通过 action 初始化时，也要确保传入一致的 group 字符串
按角色区分 pull/put 权限
即使同属一个 group，也要明确每个列表“能拉出”还是“能放入”，避免元素意外复制或消失。
- 源列表（如“待办”）应设
pull: true且put: false—— 允许拖出，但拒绝接收 - 目标列表（如“已办”）应设
pull: false且put: true—— 不可拖出，但接受投放 - 双向列表（如“可编辑分类”）才设
pull: true和put: true，但需额外校验数据合法性
禁用事件冒泡阻断误触发
嵌套或多层列表结构下，拖拽事件容易向上冒泡，导致父容器错误响应。Sortable 默认已关闭冒泡，但必须确认未被覆盖。
- 确保初始化时显式设置
dragoverBubble: false和dropBubble: false - 尤其在父子列表共存时（如“项目→任务”），若子列表未阻止冒泡，拖动任务项可能同时触发项目层级排序
- 该配置不依赖框架，原生 Sortable.js、Vue.Draggable、Svelte action 均支持
前端状态与 DOM 必须严格对齐
视觉错乱、回跳、重复渲染等问题，90% 源于框架响应式机制和 Sortable DOM 操作不同步。
- Svelte 中必须使用 keyed each：
{#each items as item (item.id)}，否则按索引更新会破坏拖拽映射 - Vue 中 v-for 必须带
:key="item.id"，且避免直接修改数组下标（如list[2] = newItem），改用splice或响应式赋值 - 不推荐将 Sortable 封装进独立组件，优先用 Svelte action 或 Vue 自定义指令，减少生命周期干扰
