Resortable Examples

Nine standalone, single-concept examples covering the v2 API surface. Each page shows a live demo and the annotated source that wired it up.

Running locally

These examples import the library directly from ../src/index.ts. Run npm run dev from the repo root, then open any example via Vite at http://localhost:5173/examples/<name>.html.

Core concepts

Basic list

A single sortable list. The hello world of Resortable.

Shared lists

Two lists sharing a group name — items move between them.

Kanban board

A three-column board with a shared group and realistic styling.

Clone mode

pull: 'clone' — drag a copy and leave the source in place.

Plugins

Swap plugin

Items swap positions instead of inserting. Mounted via Sortable.mount(SwapPlugin.create()).

Multi-drag

Ctrl/Cmd + click to select multiple items, then drag them as a batch.

Behaviors

Handle + filter

Drag from a handle (.drag-handle) and block items via filter.

Accessibility

Keyboard-only sorting with arrow keys, Space, Enter, Escape, and an SR live region.

Custom plugin

A minimal Hello World plugin that logs lifecycle events on every drag.