Vanilla JS · createSortable()

@anil-labs/dnd

Every feature, one page. Each card is a self-contained example — find the one that matches your use case.

01 Sortable list

The fundamentals: drag to reorder, with a FLIP animation on every move.

Use it for to-do lists, playlists, priority ordering — any single reorderable list.

  • Design the landing page
  • Wire up authentication
  • Write the API docs
  • Fix the mobile nav
  • Add a dark theme

02 Shared lists (groups)

Give lists the same group and items drag freely between them.

Use it for Kanban boards, assigning items to buckets, inbox → done flows.

Backlog

  • Research competitors
  • Draft the spec
  • Book the venue

In progress

  • Build the prototype

Done

  • Kick-off meeting

03 Clone (palette → canvas)

With pull: 'clone' the palette copies items out and keeps the originals.

Use it for form / page builders, component palettes, dragging tools onto a canvas.

Palette (copies out)

  • Heading
  • Paragraph
  • Image
  • Button

Canvas (drop here)

    04 Handle & filter

    handle starts a drag only from the grip; draggable marks locked rows as non-draggable.

    Use it for rows with buttons/inputs, pinned items, content that must stay selectable.

    • ⋮⋮ Drag me by the grip
    • ⋮⋮ Text stays selectable
    • 🔒 Locked — can't movedraggable filter
    • ⋮⋮ Grips beat accidental drags

    05 Multi-drag

    Ctrl/Cmd-click to select several items, then drag them together as one batch.

    Use it for file managers, bulk-move UIs, selecting multiple rows to reorder at once.

    • report-q3.pdf
    • photo-01.jpg
    • notes.md
    • budget.xlsx
    • deck.key

    Ctrl/Cmd-click a few files, then drag any selected one.

    06 Swap mode (grid)

    swap: true exchanges two items instead of inserting — perfect for 2-D grids.

    Use it for dashboards, image galleries, seating charts, any tile board.

    07 Keyboard & accessibility

    Focus an item, Space to grab, ↑/↓ to move, Space to drop, Esc to cancel — with screen-reader announcements.

    Use it for anything that must be usable without a mouse (i.e. everything).

    • 1 · Preheat oven
    • 2 · Mix the batter
    • 3 · Pour into tin
    • 4 · Bake 30 min

    Tab to an item to begin.

    08 Custom drag preview

    ghostFactory replaces the cloned element with any HTML you build.

    Use it for compact drag pills, "N items" badges, branded drag previews.

    • 🎧 Headphones
    • ⌨️ Keyboard
    • 🖱️ Mouse
    • 🖥️ Monitor

    09 Spill to delete

    removeOnSpill: true deletes an item dropped outside the list. (revertOnSpill animates it home instead.)

    Use it for drag-off-to-remove, trash zones, dismissible chips.

    • Newsletter subscription
    • Unused API key
    • Old draft
    • Expired coupon
    🗑️ Drag an item off the list to delete it

    10 Nested lists (trees)

    Trees are just lists inside list items. Give every level the same group and items drag freely between branches and depths.

    Use it for file trees, comment threads, org charts.

    Drag any row — its whole branch comes with it — anywhere in the tree.

    11 Programmatic API & live events

    Drive the list from code — move, insertAt, removeAt — and watch every event fire in real time.

    Use it for undo/redo, "add row" buttons, syncing order to a server.

    • Alpha
    • Bravo
    • Charlie