jquery drag & drop table rows ( reordering )

Question

hey im using jquery drag & drop function to move table rows up and down . the only problem is in saving data and getting the position of each row

while im using php to show table rows , dont know how to get each table row position value . the script can only find first row position value

Answer 1

Have a look at CSS-Tricks' Creating a Web App from Scratch. Their app does exactly this.

Answer 2

You may want to look at jQuery Sortable. I used it to reorder table rows.

Answer 3

I have used the jquery-ui plugin for reordering with great success. The JQuery-UI plugin provides a great way to drag and drop reorder. Then I just provide a save button which extracts the IDs of each item and creates a comma delimited string of those IDs, which it puts into a hidden textbox. Then I just pass it back via an async postback. It works perfectly and takes very little code.

JQuery-ui can be found here: http://jqueryui.com/demos/sortable/

The great thing about JQuery-ui sortable is that it takes one simple line of code to turn a UL 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). It is just up to you to provide the retrieving of the items in their new order. I just embed the unique IDs of each item in the list as an html attribute and then retrieve those IDs via jquery.

EX:

    // ----- 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(",");
}

Answer 4

thanks to Jim Petkus that did gave me a wonderful answer . but i was trying to solve my own script not to changing it to another plugin . my main focus was not using a independent plugin and do what i waned just by using jquery core

and guess what i did find the problem

var title = $("em").attr("title");
$("div").text(title);

this is what i add to my script and the blew codes to my html part :

<td> <em title=\"$weight\">$weight</em></td>

and found each row $weight value

thanks again to Jim Petkus