@anil-labs/dnd
Every feature, one page — driven by attributes, the options property and
dnd-* events. Find the card that matches your use case.
01 Sortable list
Just wrap your items — <dnd-list animation="200">.
Use it for to-do lists, playlists, priority ordering.
02 Shared lists (groups)
Matching group attributes let items move between lists.
Use it for Kanban boards, buckets, inbox → done flows.
Backlog
In progress
Done
03 Clone (palette → canvas)
The palette uses
options = { group: { pull: 'clone', put: false }, sort: false }.
Use it for page / form builders, component palettes.
Palette (copies out)
Canvas (drop here)
04 Handle & filter
handle=".grip" plus options = { draggable: ':not(.locked)' }.
Use it for rows with controls, pinned items, selectable text.
05 Multi-drag
Add the multi-drag attribute; listen to dnd-select.
Use it for file managers, bulk-move UIs.
Ctrl/Cmd-click a few files, then drag any selected one.
06 Swap mode (grid)
The swap attribute exchanges tiles instead of inserting.
Use it for dashboards, galleries, tile boards.
07 Keyboard & accessibility
Add keyboard and list-label: Space to grab,
↑/↓ to move, Esc to cancel.
Use it for keyboard-only and screen-reader users.
Tab to an item to begin.
08 Custom drag preview
Set options = { ghostFactory } to render any drag preview.
Use it for compact pills, "N items" badges, branded ghosts.
09 Spill to delete
Set options = { removeOnSpill: true } to delete on drop-off.
Use it for drag-off-to-remove, trash zones, dismissible chips.
10 Nested lists (trees)
Trees are just lists inside list items — recurse a <dnd-list> inside
each <li> and give every level the same group
attribute so items drag freely between branches and depths.
Use it for file trees, comment threads, org charts.
Drag any row into another branch — the JS tree model stays in sync.
11 Programmatic API & live events
Reach the engine via el.sortable.list; every event re-dispatches as a
dnd-* CustomEvent.
Use it for "add row" buttons, undo/redo, server sync.