Question

My html is like this

<ul>
   <li>...</li>
   <li>
       <ul>
          <li>...</li>
       </ul>
   </li>
</ul>

This is just a example, a ul can contain many li but the max depth is ul li ul like in example

I am using JqueryUI Sortable to sort this li I want to get the sort order of the li to store it in database so that user dont have to sort each time.

Thank You.

Answer 1

You’ll have to bind the “sortupdate” event which you can use to update your database. The next time the page loads you have to sort the items serverside.

EDIT:

The following will bind the sortupdate event and post it to /story/reorder (www.asdf.com/sort/reorder?ids=somevalue&oldIds=anothervalue). That page will store it in the database.

You probably have to add another variable to pass the userid of the person who logged in.

$("#sortable").bind('sortupdate', function(event, ui) {
    var ids = $("#sortable").sortable('serialize').toString();
    $.post('/story/reorder', {ids: ids, oldIds: idsOldOrder}, function(data) {
        // nothing special
        window.alert(data);
    });
    idsOldOrder = ids;
});

Source: http://www.gridshore.nl/2009/09/14/creating-a-sortable-list-of-items-using-jquery/