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

本文详解如何在 svelte 中结合 sortablejs 实现多列表间稳定拖拽排序，重点解决因缺失 key 属性和状态同步不当导致的 ui 错乱、双动、回滚等常见问题，并提供基于 action 的简洁、可维护方案。

在 Svelte 中集成 SortableJS 实现跨列表拖拽时，开发者常遇到 UI 行为异常（如元素重复移动、顺序瞬间回退、列表闪烁）——其根本原因通常不是 SortableJS 本身，而是 Svelte 的响应式更新机制与 DOM 状态未对齐。核心问题有两个：缺少 keyed each 块 和 手动修改数组未触发可靠重渲染。

✅ 关键修复一：必须使用 keyed #each

Svelte 的 {#each} 默认采用“位置映射”更新策略。当列表顺序变化而元素 id 未作为 key 时，Svelte 会错误复用或移动 DOM 节点，导致 SortableJS 的内部索引与实际 DOM 位置脱节。
务必改为：

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

括号中的 (item.id) 显式声明唯一 key，确保 Svelte 按 id 跟踪每个节点，而非索引位置。这是稳定拖拽的基础前提。

✅ 关键修复二：避免组件封装，改用 use: action 统一管理

将 Sortable 初始化逻辑封装进独立组件（如 List.svelte）会引入额外的响应式边界和生命周期不确定性，尤其在 bind: 双向绑定与异步 DOM 更新交织时极易引发竞态。推荐使用 Svelte action —— 它直接作用于 DOM 元素，生命周期清晰，且天然规避组件层级带来的状态歧义。

以下为推荐实现（基于 onEnd 事件的精准同步）：

{#each items as category, i}

Category {i}

{item.name}

{/each}

{JSON.stringify(items, null, 2)}

⚠️ 注意事项与最佳实践

items = [...items] 不可省略：Array.prototype.splice() 是原地修改，Svelte 无法自动检测深层变更。赋值新数组（或 items = items.slice()）是触发 UI 更新的必要手段。
data-list-index 用于定位：通过 dataset 将列表索引透传给 Sortable，避免在 onEnd 中依赖易变的 fullArr[index] 引用。
onEnd 优于 onSort：onSort 在拖拽过程中高频触发，易造成性能浪费；onEnd 仅在操作完成时调用，语义更准确，逻辑更可控。
销毁清理：use: action 的 destroy 函数确保组件卸载时释放 Sortable 实例，防止内存泄漏。