SvelteSortableJS多列表拖拽教程

✅ 正确做法二：用 use: action 替代自定义组件封装

将 Sortable 初始化逻辑封装进独立组件（如 List.svelte）看似模块化，实则引入了额外的状态层（arr = fullArr[index]）、生命周期耦合（onMount 时机）及响应式陷阱（直接赋值 fullArr[index] = ... 可能绕过 Svelte 的响应式追踪）。更优解是使用 Svelte Action —— 它天然绑定到 DOM 元素，生命周期清晰，且与顶层状态完全解耦：

<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 fromIdx = Number(event.from.dataset.listIndex);
        const toIdx = Number(event.to.dataset.listIndex);
        const [moved] = items[fromIdx].splice(event.oldIndex, 1);
        items[toIdx].splice(event.newIndex, 0, moved);

        // ⚠️ 关键：触发响应式更新！
        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)}

? 为什么 items = [...items] 不可省略？
items[fromIdx].splice(...) 和 items[toIdx].splice(...) 直接修改了嵌套数组的内部结构，但 Svelte 不会自动检测深层嵌套变更。重新赋值 items = [...items] 触发顶层引用变更，强制 Svelte 重新 diff 整个 items 结构，确保 UI 精确同步。

✅ 进阶建议：使用 onSort 还是 onEnd？

• onSort: 适合仅需单列表内排序，通过 sortable.toArray() 获取 ID 序列再映射回对象。但跨列表时需遍历 items.flat() 查找，性能略低且易受重复 ID 影响。
• onEnd: 推荐用于多列表场景。event.from/event.to 明确指示来源与目标容器，event.oldIndex/event.newIndex 提供精确位置，配合 .splice() 可实现原子级、零副作用的数据迁移，逻辑更清晰、性能更优。

? 总结：三大避坑原则

1. 永远为 #each 显式声明 (key) —— 尤其涉及拖拽、增删、排序等 DOM 重排操作；
2. 优先选用 use: action 而非自定义组件封装第三方库 —— 减少状态桥接、避免生命周期冲突；
3. 深层嵌套数组变更后，必须触发顶层响应式更新 —— arr = [...arr] 或 arr = structuredClone(arr) 是安全写法。

遵循以上实践，即可构建出响应灵敏、行为确定、易于维护的 Svelte + SortableJS 多列表拖拽系统。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《SvelteSortableJS多列表拖拽教程》文章吧，也可关注golang学习网公众号了解相关技术文章。