Svelte 与 SortableJS 集成：正确处理动态嵌套数组的拖拽排序

本文详解如何在 svelte 中结合 sortablejs 实现多列表（嵌套数组）的稳定拖拽排序，重点解决因 `#each` 缺失 key 导致的 ui 错乱、状态不同步及双渲染问题，并提供基于 action 的简洁、可维护实现方案。

在 Svelte 中集成 SortableJS 实现跨列表拖拽时，常见“抖动”“回跳”“重复移动”等异常行为，根本原因往往不是 SortableJS 本身，而是 Svelte 的响应式更新机制与 DOM 状态未对齐。最典型的问题是：{#each} 块缺少唯一 key 表达式，导致 Svelte 无法准确追踪每个

元素的身份，从而在排序后错误复用或销毁节点，引发视觉错乱和逻辑混乱。

✅ 正确做法：始终为 {#each category as item} 添加 key —— 使用 item.id（或其他稳定唯一标识）：

{#each category as item (item.id)}
  {item.name}
{/each}

不加 (item.id) 会导致 Svelte 按索引位置比对元素，而拖拽会改变索引顺序，造成 DOM 节点被错误移动或重渲染，进而干扰 SortableJS 的内部状态。

更进一步，避免将 Sortable 初始化封装进独立组件（如 List.svelte）。自定义组件会引入额外的生命周期、作用域和响应式绑定复杂度，容易引发 fullArr[index] 赋值后视图未及时同步、onSort 多次触发、或 sortable.toArray() 返回旧 ID 序列等问题。

推荐采用 Svelte Action（use: 指令） —— 它天然与 DOM 元素绑定，生命周期清晰（仅在元素挂载/卸载时执行），且逻辑集中、无状态泄漏风险。以下是生产就绪的实现：

✅ 推荐方案：使用 use: action + onEnd 精准更新（推荐用于跨列表拖拽）


{#each items as category, i}
  Category {i}
  
    {#each category as item (item.id)}
      {item.name}
    {/each}
  
{/each}


{JSON.stringify(items, null, 2)}
? 关键要点：

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 多列表拖拽系统。