Basics
Add data-sortable with SortableJS options as JSON to any list to make its children draggable.
Basic usage
Drag to reorder items within a single list.
- Element A
- Element B
- Element C
- Element D
Two lists with drag and drop
Give lists the same group to move items between them.
- Item 1
- Item 2
- Item 3
- Item A
- Item B
- Item C
Horizontal lists
Set direction to horizontal for rows of tags, and drag them between the two rows.
Fixed items
Set filter to a selector to make matching items impossible to drag.
- Inbox (pinned)
- Projects
- Reports
- Archive
- Trash (pinned)
Handles and tables
Limit dragging to a grip icon, or reorder the rows of a table.
Drag handle
Set handle so only the grip starts a drag, and the rest of the row stays clickable.
Sortable table
Put data-sortable on the tbody to reorder rows.
| Drag | Name | Title | Country |
|---|---|---|---|
| Paweł Kuna | UI Designer | China | |
| Jeffie Lewzey | Chemical Engineer | Brazil | |
| Mallory Hulme | Geologist IV | Indonesia | |
| Dunn Slane | Research Nurse | China | |
| Emmy Levet | VP Product Management | Indonesia |
Grid of avatars
Sortable also works on a wrapping layout, not just on vertical lists.
Disabled list
Set disabled to true to lock a list, for example while the user has no edit rights.
- Read-only item 1
- Read-only item 2
- Read-only item 3
Boards
Connect several lists to build a kanban board, a pick list or a nested tree.
Kanban board
Drag tasks between columns that share one group. Set forceFallback to true to drag a tilted copy with a shadow instead of the browser preview.
Upcoming
In Progress
Completed
Clone from a list
Use pull: "clone" and put: false on the source so items are copied, not moved.
- Heading
- Paragraph
- Image
- Button
- Paragraph
One-way transfer
Set put: false on a list to make it a source only, and use it to build a pick list.
- Email alerts
- SMS alerts
- Weekly digest
- Push notifications
- In-app messages
Nested lists
Put a sortable list inside an item and give all lists one group to move items between levels.
-
Design
- Wireframes
- Prototype
-
Development
- Frontend
- Backend
- Tests
-
Launch
- Release notes
Selection and swapping
The bundled SortableJS build also ships the MultiDrag and Swap plugins.
Multiple selection
Set multiDrag to true. Hold Ctrl or ⌘ and click to select items, then drag them together.
- Invoice #1001
- Invoice #1002
- Invoice #1003
- Invoice #1004
- Invoice #1005
Swap
Set swap to true to exchange two items instead of shifting the rest.
- First place
- Second place
- Third place
- Fourth place