本文详解如何在 svelte 中结合 sortablejs 实现多个动态列表间的稳定拖拽排序，重点解决因缺失 key、状态同步不一致导致的 ui 错乱问题，并提供基于 action 的简洁、可维护实现方案。
在 Svelte 中集成 SortableJS 实现跨列表拖拽时，常见“双移动”“回退错位”等 UI 异常，根本原因通常有两个：#each 块缺少唯一 key 和 组件级状态与 DOM 状态不同步（如通过 bind: 暴露响应式属性却未触发 Svelte 的自动更新机制）。直接封装为子组件（如 List.svelte）反而会增加生命周期管理复杂度，推荐使用 Svelte actions —— 它天然绑定到 DOM 元素，生命周期清晰，且能安全访问和更新外部 store 或变量。
✅ 正确做法：使用 use: action + keyed #each
首先，为每个 <li> 添加 (item.id) 作为 key，确保 Svelte 能精准追踪每个元素的身份，避免重排时复用错误节点：
{#each category as item (item.id)}
<li data-id={item.id}>{item.name}</li>
{/each}其次，将 Sortable 初始化逻辑封装为 action，接收列表索引并直接操作顶层 items 数组：
<script>
import Sortable from 'sortablejs';
let items = [
[{ id: 1, name: "one" }, { id: 2, name: "two" }],
[{ id: 3, name: "three" }, { id: 4, name: "four" }]
];
function initSortable(node, listIndex) {
const sortable = new Sortable(node, {
group: "list",
onEnd(event) {
// 获取源列表和目标列表索引（通过 data 属性）
const fromIndex = Number(event.from.dataset.listIndex);
const toIndex = Number(event.to.dataset.listIndex);
// 从源列表移除被拖动项
const [movedItem] = items[fromIndex].splice(event.oldIndex, 1);
// 插入到目标列表指定位置
items[toIndex].splice(event.newIndex, 0, movedItem);
// ⚠️ 关键：显式赋值触发响应式更新（.splice 不会自动触发）
items = [...items];
}
});
return {
destroy() {
sortable.destroy();
}
};
}
</script>
{#each items as category, i}
<h2>Category {i}</h2>
<ul data-list-index={i} use:initSortable={i}>
{#each category as item (item.id)}
<li data-id={item.id}>{item.name}</li>
{/each}
</ul>
{/each}
<pre>{JSON.stringify(items, null, 2)}</pre>? 为什么这样更可靠？
- Key 保障 DOM 稳定性：(item.id) 让 Svelte 始终按 ID 匹配元素，即使数组顺序变化，也不会错误复用 <li> 节点。
- 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 实例，防止内存泄漏。
遵循以上模式，即可构建出响应迅速、行为可预测的多列表拖拽系统，彻底告别“抖动”与“回滚”等典型陷阱。
