Svelte结合SortableJS动态列表排序后显示异常求助

核心问题出在SortableJS的DOM直接操作与Svelte响应式渲染的冲突，再加上{#each}用了动态变化的索引作为key，导致排序后DOM顺序和数据源不一致。

当拖动排序时，SortableJS会直接调整DOM元素的位置；同时你在onEnd里更新了数据源，Svelte又会根据新数据源重新渲染列表——相当于DOM被两次调整顺序，最终就出现了“数据源只动了一次，页面显示动了两次”的异常。

另外，{#each}里用(indice)当key是典型错误：索引会随着排序动态改变，Svelte的diff算法没法正确识别每个列表项的身份，渲染时自然会混乱。

解决步骤 #

1. 把{#each}的key换成唯一ID #

把原来的索引key改成列表项的唯一标识id，确保Svelte能精准跟踪每个元素：

{#each listIdsForChips as id, indice (id)}
  <ChipExo text={id} {indice} />
{/each}

2. 让Svelte完全掌控DOM顺序 #

在Sortable的onEnd回调里，先把拖动的元素放回原来的位置，再更新数据源。这样Sortable的临时DOM修改不会干扰最终渲染，完全由Svelte根据新数据源生成正确顺序：

onMount(() => {
  const chipsList = document.getElementById("chips-list");
  if (!chipsList) return;

  const sortable = Sortable.create(chipsList, {
    animation: 150,
    onEnd: (evt) => {
      // 先把DOM元素拖回原位置，避免和Svelte渲染冲突
      if (evt.item && evt.oldIndex !== undefined && evt.newIndex !== undefined) {
        const parent = evt.item.parentNode;
        if (parent) {
          const children = Array.from(parent.children);
          parent.removeChild(evt.item);
          parent.insertBefore(evt.item, children[evt.oldIndex]);
        }
      }

      // 更新数据源，让Svelte重新渲染正确顺序
      exercicesParams.update((l) => {
        return moveExercice(l, evt.oldIndex, evt.newIndex);
      });
    },
  });
});

3. 简化动态数据源的处理 #

你原来的listIdsForChips推导可以简化成一行，响应式更新更可靠：

$: listIdsForChips = $exercicesParams.map(ex => ex.id ?? ex.uuid);

完整修改后的代码 #

<script lang="ts">
  import Sortable from "sortablejs";
  import ChipExo from "./ChipExo.svelte";
  import { exercicesParams, moveExercice } from "../store";
  import { onMount } from "svelte";

  $: listIdsForChips = $exercicesParams.map(ex => ex.id ?? ex.uuid);

  onMount(() => {
    const chipsList = document.getElementById("chips-list");
    if (!chipsList) return;

    const sortable = Sortable.create(chipsList, {
      animation: 150,
      onEnd: (evt) => {
        // 恢复DOM原位置，交由Svelte渲染正确顺序
        if (evt.item && evt.oldIndex !== undefined && evt.newIndex !== undefined) {
          const parent = evt.item.parentNode;
          if (parent) {
            const children = Array.from(parent.children);
            parent.removeChild(evt.item);
            parent.insertBefore(evt.item, children[evt.oldIndex]);
          }
        }

        exercicesParams.update((l) => moveExercice(l, evt.oldIndex, evt.newIndex));
      },
    });
  });
</script>

<div
  class="w-full grid justify-items-stretch place-content-stretch grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-7 xl:grid-cols-8 2xl:grid-cols-10 gap-2 p-0 items-center overflow-x-auto whitespace-nowrap"
  id="chips-list"
>
  {#each listIdsForChips as id, indice (id)}
    <ChipExo text={id} {indice} />
  {/each}
</div>

为什么这样能解决问题 #

• 用唯一ID当key，Svelte每次渲染都能准确匹配列表项，不会因为索引变化导致元素复用错误。
• 先恢复DOM位置，让Sortable的临时操作不影响最终结果，完全由Svelte根据数据源控制DOM顺序，从根源避免两次移动的冲突。
• 简化响应式逻辑，让listIdsForChips的更新更简洁、不易出错。

内容的提问来源于stack exchange，提问作者Sylcha