本文详解如何在 svelte 中结合 sortablejs 实现多列表（嵌套数组）的稳定拖拽排序，重点解决因 `#each` 缺失 key 导致的 ui 错乱、状态不同步及双渲染问题，并提供基于 action 的简洁、可维护实现方案。
在 Svelte 中集成 SortableJS 实现跨列表拖拽时，常见“抖动”“回跳”“重复移动”等异常行为，根本原因往往不是 SortableJS 本身，而是 Svelte 的响应式更新机制与 DOM 状态未对齐。最典型的问题是：{#each} 块缺少唯一 key 表达式，导致 Svelte 无法准确追踪每个 <li> 元素的身份，从而在排序后错误复用或销毁节点，引发视觉错乱和逻辑混乱。
✅ 正确做法：始终为 {#each category as item} 添加 key —— 使用 item.id（或其他稳定唯一标识）：
{#each category as item (item.id)}
<li data-id={item.id}>{item.name}</li>
{/each}不加 (item.id) 会导致 Svelte 按索引位置比对元素，而拖拽会改变索引顺序，造成 DOM 节点被错误移动或重渲染，进而干扰 SortableJS 的内部状态。
更进一步，避免将 Sortable 初始化封装进独立组件（如 List.svelte）。自定义组件会引入额外的生命周期、作用域和响应式绑定复杂度，容易引发 fullArr[index] 赋值后视图未及时同步、onSort 多次触发、或 sortable.toArray() 返回旧 ID 序列等问题。
推荐采用 Svelte Action（use: 指令） —— 它天然与 DOM 元素绑定，生命周期清晰（仅在元素挂载/卸载时执行），且逻辑集中、无状态泄漏风险。以下是生产就绪的实现：
✅ 推荐方案：使用 use: action + onEnd 精准更新（推荐用于跨列表拖拽）
<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: 'shared-lists', // 同名 group 支持跨列表拖拽
onEnd(event) {
// 从源列表移除
const fromItems = items[event.from.dataset.listIndex];
const [movedItem] = fromItems.splice(event.oldIndex, 1);
// 插入目标列表（注意：newIndex 是插入前的位置）
const toItems = items[event.to.dataset.listIndex];
toItems.splice(event.newIndex, 0, movedItem);
// 强制触发响应式更新（因 .splice 修改原数组，Svelte 不自动检测）
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>? 关键要点：
- data-list-index 将列表索引透传给 DOM，供 onEnd 中安全读取（避免闭包捕获过期 i）；
- 使用 onEnd 而非 onSort：onSort 在拖拽中高频触发，且 toArray() 可能返回中间态 ID；onEnd 仅在操作完成时调用，数据最终一致；
- items = [...items] 是必需的：Svelte 仅对赋值操作（=）进行响应式追踪，.splice() 属于原地修改，需显式触发更新；
- use: action 的 destroy 钩子确保组件卸载时清理 Sortable 实例，防止内存泄漏。
⚠️ 注意事项
- 勿直接修改 items[i] = newArray：若 newArray 是新引用但元素相同，Svelte 可能跳过更新；应统一用 items = [...items] 或 items = structuredClone(items) 触发变更。
- ID 必须全局唯一：跨列表拖拽依赖 item.id 查找，重复 ID 将导致匹配错误。
- 避免在 onSort 中调用 fullArr.flat().find(...)：该方式性能差（O(n²)），且在多列表场景下易因数组未及时更新而查到错误项；onEnd + 显式移动语义更可靠、高效。
通过 key 化 #each 和 action 驱动的精准状态管理，即可彻底告别“抖动列表”，构建出响应迅速、逻辑清晰、易于扩展的 Svelte 多列表拖拽系统。
