Container

Container wraps a core SnapSort container and provides it to descendant Item and nested Container components through Svelte context.

Svelte owns the rendered collection. Supply a synchronous state mutation callback for every persistent operation the container accepts; the adapter does not fall back to SnapSort’s Vanilla DOM callbacks.

<script lang="ts">
  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" },
  ]);

  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(Math.max(0, Math.min(event.to.index, next.length)), 0, task);
    tasks = next;
  }
</script>

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

Each entry must render exactly one Item or nested Container whose itemId matches getItemId(entry).

Props

type ContainerProps<T> = {
  config: ContainerConfig;
  items?: T[];
  getItemId?: (entry: T) => string;
  entry: Snippet<[T]>;
  ghost?: Snippet<[GhostInsertEvent]>;
  before?: Snippet;
  after?: Snippet;
  itemId?: string;
  container?: Container;
  locked?: boolean;
  selected?: boolean;
  className?: string;
  metadata?: Record<string, unknown>;
};

Container renders a div with snapsort-container plus a mode-specific class.

Config

Mode is resolved from the root container when a drag starts, so nested containers in one drag tree should use the same mode.

Callbacks

Update Svelte arrays synchronously in onItemMove or onItemSwap. The adapter uses flushSync, allowing SnapSort to read final DOM geometry before paint. Missing callbacks fail clearly instead of mutating framework-rendered DOM.

Bindable Core Object

Use bind:container when buttons, keyboard handlers, or other controls need the core container API.

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

  let source: SnapSortContainer | undefined = $state();
  let target: SnapSortContainer | undefined = $state();
  let sourceCards = $state([{ id: "card-1", label: "Card 1" }]);
  let targetCards = $state<{ id: string; label: string }[]>([]);

  function onItemMove(event: ItemMoveEvent) {
    const card = [...sourceCards, ...targetCards].find((entry) => entry.id === event.itemId);
    if (!card) return;
    sourceCards = sourceCards.filter((entry) => entry.id !== event.itemId);
    targetCards = targetCards.filter((entry) => entry.id !== event.itemId);
    const targetList = event.to.container === target ? targetCards : sourceCards;
    targetList.splice(Math.max(0, Math.min(event.to.index, targetList.length)), 0, card);
    if (event.to.container === target) targetCards = targetList;
    else sourceCards = targetList;
  }

  function moveToTarget(id: string) {
    if (!source || !target) return;
    source.moveItem(id, target, target.numberOfItems);
  }
</script>

<Container
  bind:container={source}
  config={{ direction: "column", groupID: "cards", callbacks: { onItemMove } }}
  items={sourceCards}
  getItemId={(card) => card.id}
>
  {#snippet entry(card)}
    <Item itemId={card.id}>
      <button type="button" onclick={() => moveToTarget(card.id)}>Move card</button>
    </Item>
  {/snippet}
</Container>

<Container
  bind:container={target}
  config={{ direction: "column", groupID: "cards", callbacks: { onItemMove } }}
  items={targetCards}
  getItemId={(card) => card.id}
>
  {#snippet entry(card)}
    <Item itemId={card.id}>{card.label}</Item>
  {/snippet}
</Container>

Custom Ghost

Use a ghost snippet with Ghost to customize every framework-owned ghost kind: flow spacers, insertion markers, and swap pointers.

<Container config={{ mode: "progressive", direction: "row", callbacks: { onItemMove } }} items={tiles}>
  {#snippet entry(tile)}
    <Item itemId={tile.id}>{tile.text}</Item>
  {/snippet}

  {#snippet ghost(event)}
    <Ghost {event}>
      <span class="tile-ghost">{event.originalItemId}</span>
    </Ghost>
  {/snippet}
</Container>