Sortable

Code

$("#todo-list").sortable({
  placeholder: "ui-state-highlight",
  forcePlaceholderSize: true,
  cursor: "move",
  axis: "y",
  opacity: 0.6,
  update: function(event, ui) {
    const order = $(this).sortable("toArray");
    console.log("New order:", order);
    $.post("/save-order", { items: order });
  }
});

// Connect two lists so items can move between them
$("#list-a, #list-b").sortable({
  connectWith: ".connected",
  receive: function(event, ui) {
    console.log("Received item:", ui.item.attr("id"));
  }
});

// Serialize to form data
const serialized = $("#todo-list").sortable("serialize");
// Produces: item[]=1&item[]=2&item[]=3

Explanation

Turns a list into a drag-to-reorder widget; toArray and serialize make it easy to capture the new order for persistence. Connect multiple lists with connectWith so items can be dragged between them, firing receive on the target list. The placeholder option styles the empty slot shown during dragging.

More jQuery UI Snippets