Live Demo
Drag items to reorder the list below, then drag cards between the two "kanban" columns further down.
Sortable List
Connected Lists (To Do / Done)
To Do
Done
Drag an item to see the update event fire.
jQuery UI Sortable
jQuery UI's sortable() interaction lets users reorder items in a list (or grid) by dragging, and even drag items between separate lists. It's the building block behind drag-to-reorder to-do lists and simple kanban boards.
Quick Reference
| Option / Event | Description | Example |
|---|---|---|
.sortable() | Makes the children of an element (e.g. <li>s in a <ul>) drag-to-reorder. | $('#list').sortable(); |
placeholder | CSS class for the visual gap shown where the item will drop. | placeholder: 'ui-state-highlight' |
connectWith | Lets items be dragged from this list into another matching selector. | connectWith: '.kanban-col ul' |
update | Fires when the order changes (list reordered or item moved between lists) — ideal spot to save the new order via AJAX. | update: function(e, ui){ ... } |
.sortable('toArray') | Reads back the current order of item IDs. | $('#list').sortable('toArray') |
Tip: Give each
<li> a stable id attribute so toArray() and the update event give you meaningful identifiers to persist.3) connectWith (Two-Column Kanban)
// drag cards between "To Do" and "Done" columns
$('.kanban-col ul').sortable({
connectWith: '.kanban-col ul',
placeholder: 'ui-state-highlight'
});
4) update Event
$('#list').sortable({
update: function(e, ui){
var order = $(this).sortable('toArray');
// $.post('/save-order', { order: order }); (conceptual - no real backend here)
}
});
Note: In a real app, hook the
update event to send the new order (or the moved item's new list) to your server with $.post() or $.ajax() so it persists.