jQuery

Drag-and-drop reordering with jQuery UI Sortable

Turn any list into a reorderable one, then persist the new order on the server.

Théo « rootcause »
dev web & performance · updated Jan 2025

This guide revisits and updates an original tutorial from noiretaya.com (log.noiretaya.com/186). The code has been refreshed for current versions.

Make a list sortable

Call .sortable() on the container; its direct children become draggable.

<ul id="list">
  <li data-id="1">Item A</li>
  <li data-id="2">Item B</li>
  <li data-id="3">Item C</li>
</ul>
<script>
  $('#list').sortable({ axis: 'y', cursor: 'grabbing' });
</script>

Save the new order

The update event fires after a drop. Read the order and POST it.

$('#list').sortable({
  update: function () {
    const order = $(this).children().map(function () {
      return $(this).data('id');
    }).get();
    $.post('/reorder', { order: order });
  }
});

Accessibility note: drag-and-drop alone is not keyboard-friendly — pair it with up/down buttons so every user can reorder.