@rozie-ui/sortable-list-svelte

Idiomatic svelte SortableList — a cross-framework drag-and-drop list compiled from one Rozie source via SortableJS. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/sortable-list-svelte

Peer dependencies: sortablejs ^1.15 + svelte. Install them alongside this package.

Usage

<script lang="ts">
  import SortableList from '@rozie-ui/sortable-list-svelte';

  let items = $state([
    { id: '1', label: 'Apple' },
    { id: '2', label: 'Banana' },
  ]);
</script>

<SortableList bind:items itemKey="id">
  {#snippet default({ item })}
    <span>{item.label}</span>
  {/snippet}
</SortableList>

Props

| Name | Type | Default | Two-way (model) | Required | | --- | --- | --- | :---: | :---: | | items | Array | [] | ✓ | | | itemKey | String \| Function | null | | | | handle | String | null | | | | group | String | null | | | | animation | Number | 150 | | | | disabled | Boolean | false | | | | disableKeyboard | Boolean | false | | | | options | Object | {} | | | | labelFor | Function | null | | | | ghostClass | String | null | | | | chosenClass | String | null | | | | dragClass | String | null | | | | filter | String | null | | | | easing | String | null | | | | forceFallback | Boolean | false | | | | swapThreshold | Number | 1 | | | | cloneable | Boolean | false | | | | listClass | String \| Array \| Object | "" | | | | itemClass | String \| Array \| Object \| Function | "" | | | | itemStyle | String \| Object \| Function | null | | |

Events

| Event | Description | | --- | --- | | change | Fired after the list order changes (same-list reorder commit). | | add | Fired when an item is added from another list (cross-list destination commit). | | remove | Fired when an item is moved out to another list (cross-list source commit; not fired in clone mode). | | start | Fired when dragging starts. | | end | Fired when dragging ends (source side). |

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

| Method | Description | | --- | --- | | getInstance | Return the underlying SortableJS instance for direct API access (the raw-engine escape hatch — save, closest, etc. are one hop away). null before mount and after destroy. | | toArray | Return the current order as an array of data-id strings (each row carries data-id="<key>"). [] before mount. | | sort | Reorder the list by an array of data-id strings — sort(order, useAnimation = true). | | option | Read or set a live SortableJS option — option(name) gets, option(name, value) sets. The runtime escape hatch for options beyond the curated props. |

<script>
  let sl;                  // component instance via bind:this
</script>

<SortableList bind:this={sl} />
<button onclick={() => console.log(sl.toArray())}>Log order</button>

Slots

| Slot | Params | | --- | --- | | header | | | (default) | item, index | | footer | |