implementing-drag-n-drop-using-jquery

jQuery UI's serialize method looks at the IDs of your elements and creates a serialized hash string that's suitable for posting back to your controller. By default, your IDs must be in one of the following formats:

<li id="setname=number"></li>
<li id="setname-number"></li>
<li id="setname_number"></li>

All of these will result in:

"setname[]=number&setname[]=number"

If the serialize method returns an empty string, then you are either not targeting the sortable elements correctly, they have not yet been initalized with the sortable() call, or the IDs are not in the correct format. Note that it is possible to modify the way jQuery UI serializes the elements by passing a custom 'key', 'attribute', and 'expression' parameters to the serialize method:

var sortedList = $('ul.sortableList').sortable('serialize', { attribute: 'itemid', key: 'foo[]', expression: /(.+)=(.+)/ });

Of course, you can always roll your own serialize method and pass the updated LI positions to your controller manually:

var positions = new Array();

$sortableLis.each(function () {

    var sortableId = $(this).find('input[id$=SortableID]').val();
    var sortOrder = $sortableLis.index($(this));

    var SortablePosition = {
        ID: encodeURIComponent(sortableId),
        SortOrder: sortOrder
    };

    positions.push(SortablePosition);

});

$.ajax({
    type: 'POST',
    url: '/UpdateSortablePositions',
    data: "{ positions: '" + $.toJSON(positions) + "' }",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json'
});