Sortable · drag to reorder
Reorder by dragging — rows glide out of the way, a lifted copy follows the pointer, scrolling edges scroll — in lists, rows or grids, between connected lists, by touch with a long press, or by keyboard.
A list with grips · drag, or Tab to a grip and use Space + ↑ ↓
- Write the release notes docs
- Fix the flaky test bug
- Review the design design
- Update the changelog docs
- Ship v2.4 release
Drag the whole thing · a ranking in a row
- 1Speed
- 2Price
- 3Design
- 4Support
- 5Battery
A grid · long-press on touch
- Photo 1
- Photo 2
- Photo 3
- Photo 4
- Photo 5
- Photo 6
- Photo 7
- Photo 8
- Photo 9
- Photo 10
- Photo 11
- Photo 12
Two lists that trade · pick the columns of a report
Available
- Email
- Phone
- Company
- Country
- Website
In the report
- Name
- Role
Columns: Name · Role
Usage
import { signal, html } from "./index.js";import { Sortable } from "./components/sortable.js"; const tasks = signal([{ id: 1, title: "Write docs" }, { id: 2, title: "Fix bug" }]); // items need an idSortable({ items: tasks, render: (t, handle) => html`<div>${handle()} ${t.title}</div>`, onChange: ({ item, fromIndex, toIndex }) => save(tasks()) }) Sortable({ items: chips, direction: "horizontal", handle: false }) // drag the whole itemSortable({ items: photos, direction: "grid", handle: false }) // long-press on touchSortable({ items: available, group: "fields" }) // same group → they tradeSortable({ items: chosen, group: "fields", accepts: (item) => chosen().length < 6 })