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

Question

I have:

     
item 1
     
item 2
     
item 3

         


        

Answer 1

When the update function is invoked the ui.item.sortable has not been updated, however the UI element has visually moved.
This allows you in the update function to get old position and new position.

   $('#sortable').sortable({    
        update: function(e, ui) {
            // ui.item.sortable is the model but it is not updated until after update
            var oldIndex = ui.item.sortable.index;

            // new Index because the ui.item is the node and the visual element has been reordered
            var newIndex = ui.item.index();
        }    
});