本文详解如何在 svelte 中结合 sortablejs 实现多个动态列表间的稳定拖拽排序，重点解决因缺失 key、状态同步不一致导致的 ui 错乱问题，并提供基于 action 的简洁、可维护实现方案。
在 Svelte 中集成 SortableJS 实现跨列表拖拽时，常见“双移动”“回退错位”等 UI 异常，根本原因通常有两个：#each 块缺少唯一 key 和 组件级状态与 DOM 状态不同步（如通过 bind: 暴露响应式属性却未触发 Svelte 的自动更新机制）。直接封装为子组件（如 List.svelte）反而会增加生命周期管理复杂度，推荐使用 Svelte actions —— 它天然绑定到 DOM 元素，生命周期清晰，且能安全访问和更新外部 store 或变量。
✅ 正确做法：使用 use: action + keyed #each
首先，为每个
{#each category as item (item.id)}
其次，将 Sortable 初始化逻辑封装为 action，接收列表索引并直接操作顶层 items 数组：
{#each items as category, i}
Category {i}
-
{#each category as item (item.id)}
- {item.name} {/each}
{JSON.stringify(items, null, 2)}? 为什么这样更可靠？
- Key 保障 DOM 稳定性：(item.id) 让 Svelte 始终按 ID 匹配元素，即使数组顺序变化，也不会错误复用
- 节点。
- Action 避免组件边界干扰：无需 bind: 或 props 透传，直接操作 items 并通过 items = [...items] 触发更新，语义清晰、副作用可控。
- onEnd 替代 onSort：onSort 在排序过程中高频触发，易引发竞态；onEnd 仅在拖拽结束时执行一次，逻辑更确定，且 event.from/event.to 可准确识别跨列表行为。
- 显式响应式赋值：items = [...items] 是必需的——Svelte 不监听数组内部 mutation（如 splice），必须通过重新赋值通知更新。
? 进阶提示
- 若需支持嵌套层级或更复杂数据结构，可将 items 改为 store（writable），并在 onEnd 中调用 update()。
- 为提升体验，建议添加 animation: 150 和 ghostClass: "sortable-ghost" 等 Sortable 配置。
- 生产环境务必在 destroy() 中清理 Sortable 实例，防止内存泄漏。
遵循以上模式，即可构建出响应迅速、行为可预测的多列表拖拽系统，彻底告别“抖动”与“回滚”等典型陷阱。
