Dealing with a sortable list on jQuery

Question

I am using the "sortable" script ( http://farhadi.ir/projects/html5sortable/ ) to have a sortable list of items on my web application. The sorting part works great. But now, I need to be able to ping back to my server to set the order when things change.

The way to capture that event is:

$('.sortable').sortable().bind('sortupdate', function() {
    //Triggered when the user stopped sorting and the DOM position has     changed.
});

How do I understand the new position in order to inform my server? Since the lists are small, I thought of two approaches:

1 - Understand in which position the item was dragged, look at the position right below and send some sort of "insert" update function to my server to insert the new item in that position.

2 - Just go through all the items on the list, capture their IDs in order and send the new ID list to the server and have the server re-build the index based on that list.

I can handle the ruby code but I am a disaster with JS/Jquery.

So, if I go with option 1 - how do I identify the position of the new item and how do I identify which is the item right below it?

If I go with option 2 - how do I iterate on all li items in the exact order they are positioned (their DOM order) so that I can build this list and send it back to the server?

Answer 1

Read the ids of the lis when the update is fired

var ids = $(".sortable").find("li").map( function(txt, elem){
   return elem.id
} ).get();
console.log(ids);