Reorder HTML table rows using drag-and-drop

Question

I have a jQuery function to move table rows up and down. I do not know how to save the data, nor get the position of each row. I am using PHP to show the table rows.

How do I get each table row position value when the user reorders the table rows?

Answer 1

The jQuery UI sortable plugin provides drag-and-drop reordering. A save button can extract the IDs of each item to create a comma-delimited string of those IDs, added to a hidden textbox. The textbox is returned to the server using an async postback.

This fiddle example reorders table elements, but does not save them to a database.

The sortable plugin takes one line of code to turn any list into a sortable list. If you care to use them, it also provides CSS and images to provide a visual impact to sortable list (see the example that I linked to). Developers, however, must provide code to retrieve items in their new order. I embed unique IDs of each item in the list as an HTML attribute and then retrieve those IDs via jQuery.

For example:

// ----- code executed when the document loads $(function() {     wireReorderList(); });  function wireReorderList() {     $("#reorderExampleItems").sortable();     $("#reorderExampleItems").disableSelection(); }  function saveOrderClick() {     // ----- Retrieve the li items inside our sortable list     var items = $("#reorderExampleItems li");      var linkIDs = [items.size()];     var index = 0;      // ----- Iterate through each li, extracting the ID embedded as an attribute     items.each(         function(intIndex) {             linkIDs[index] = $(this).attr("ExampleItemID");             index++;         });      $get("<%=txtExampleItemsOrder.ClientID %>").value = linkIDs.join(","); }