SnapSort

<script lang="ts">
  import { Engine } from "@snap-engine/asset-base-svelte";
  import { Container, Item } from "@snap-engine/snapsort-svelte";
  import type { ItemMoveEvent } from "@snap-engine/snapsort";

  let tasks = $state([
    { id: "design", label: "Design" },
    { id: "build", label: "Build" },
    { id: "ship", label: "Ship" },
  ]);

  function onItemMove(event: ItemMoveEvent) {
    const task = tasks.find((entry) => entry.id === event.itemId);
    if (!task) return;

    const next = tasks.filter((entry) => entry.id !== event.itemId);
    next.splice(event.to.index, 0, task);
    tasks = next;
  }
</script>

<Engine id="quick-start">
  <Container
    config={{ direction: "column", groupID: "tasks", callbacks: { onItemMove } }}
    items={tasks}
  >
    {#snippet entry(task)}
      <Item itemId={task.id}>{task.label}</Item>
    {/snippet}
  </Container>
</Engine>