Sortable

$("#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