Svelte

npm install @anil-labs/dnd-svelte

Works with Svelte 4 and Svelte 5 (runes) alike.

The use:draggable action

You render the list with {#each}; the action wires the engine to the container:

<script lang="ts">
  import { draggable } from '@anil-labs/dnd-svelte'
  import '@anil-labs/dnd-core/styles.css'

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

<ul
  use:draggable={{
    items,
    onItemsChange: (v) => (items = v),
    group: 'tasks',
    animation: 200,
    onEnd: (e) => console.log('dropped', e.oldIndex, '→', e.newIndex),
  }}
>
  {#each items as item, i (item.id)}
    <li data-dnd-index={i} class="dnd-item">{item.text}</li>
  {/each}
</ul>

Three rules for the markup:

1. Items are keyed direct children ((item.id)) so Svelte moves nodes instead of recreating them.
2. Each item carries data-dnd-index={i} matching its array position.
3. Each item has the dnd-item class (cursor + touch-action).

Options

items and onItemsChange plus everything in the options reference including all event callbacks (onStart, onEnd, onAdd, onRemove, onUpdate, onChange, onSelectionChange, onKeyboardMove, …).

The action's update runs whenever the options object changes, so reactive values Just Work:

<ul use:draggable={{ items, onItemsChange: (v) => (items = v), disabled: locked }}>

Svelte 4

Identical, with store/let state instead of runes:

<script>
  import { draggable } from '@anil-labs/dnd-svelte'
  let items = [{ id: 1, text: 'Apple' }]
</script>

<ul use:draggable={{ items, onItemsChange: (v) => (items = v), animation: 200 }}>
  {#each items as item, i (item.id)}
    <li data-dnd-index={i} class="dnd-item">{item.text}</li>
  {/each}
</ul>

Selection & keyboard state

Track them via callbacks and render whatever you like:

<script lang="ts">
  let selected = $state<number[]>([])
</script>

<ul
  use:draggable={{
    items,
    onItemsChange: (v) => (items = v),
    multiDrag: true,
    onSelectionChange: (e) => (selected = e.indices),
  }}
>
  {#each items as item, i (item.id)}
    <li data-dnd-index={i} class="dnd-item" class:picked={selected.includes(i)}>
      {item.text}
    </li>
  {/each}
</ul>

For keyboard mode add tabindex="0" to items (or rely on the engine's announcements only); the dnd-keyboard-active outline is applied via onKeyboardStateChange if you mirror it into a class the same way.