jQuery UI Sortable, how to determine current location and new location in update event?

Question

I have:

<ul id="sortableList">
  <li>item 1<li>
  <li>item 2<li>
  <li>item 3<li>
</ul>


I have wired into the update: function(event, ui) { } but am not sure how to get the original and new position of the element. If i move item 3 to be above item 1, I want the original position to be 2 (0 based index) and the new position of item 3 to be 0.

Answer 1

You have several possibilities to check the old and the new position. I would put them into arrays.

$('#sortable').sortable({
    start: function(e, ui) {
        // puts the old positions into array before sorting
        var old_position = $(this).sortable('toArray');
    },
    update: function(event, ui) {
        // grabs the new positions now that we've finished sorting
        var new_position = $(this).sortable('toArray');
    }
});

And you can then easily extract what you need.