本文详解如何在 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)}
<li data-id={item.id}>{item.name}</li>
{/each}括号中的 (item.id) 显式声明唯一 key，确保 Svelte 按 id 跟踪每个节点，而非索引位置。这是稳定拖拽的基础前提。
✅ 关键修复二：避免组件封装，改用 use: action 统一管理
将 Sortable 初始化逻辑封装进独立组件（如 List.svelte）会引入额外的响应式边界和生命周期不确定性，尤其在 bind: 双向绑定与异步 DOM 更新交织时极易引发竞态。推荐使用 Svelte action —— 它直接作用于 DOM 元素，生命周期清晰，且天然规避组件层级带来的状态歧义。
以下为推荐实现（基于 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: 'list',
onEnd(event) {
// 从源列表删除被拖走的项
const fromIndex = Number(event.from.dataset.listIndex);
const toIndex = Number(event.to.dataset.listIndex);
const movedItem = items[fromIndex].splice(event.oldIndex, 1)[0];
// 插入到目标列表指定位置
items[toIndex].splice(event.newIndex, 0, movedItem);
// 强制触发响应式更新（关键！）
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>⚠️ 注意事项与最佳实践
- 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 实例，防止内存泄漏。
此方案结构清晰、无冗余组件、状态流单向明确（DOM → action → items → UI），彻底规避了动态数组拖拽中的典型陷阱，是生产环境推荐的最佳实践。
