Unsortable enables nested drag-and-drop reordering without reordering the DOM. Built for reactive frameworks like Svelte, Vue and React. Powered by dnd-kit.

pnpm add unsortable

import { Unsortable } from 'unsortable'
import { items, setItems } from './my-items.js'

const { addDraggable, addDroppable } = new Unsortable()

addDroppable(containerElement, { items, setItems })
addDraggable(draggableElement, { item })

Need help wiring up items and setItems in your framework?

Check out these example projects:

• Svelte

• React

• Vue

Each demo shows how to manage state and bind it to Unsortable.

git clone https://github.com/jakobrosenberg/unsortable.git
cd unsortable/examples/<svelte|react|vue>
pnpm install
pnpm run dev