0

According to this question (and answers), I should be able to get the original start position and end position in several ways:

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

$('#sortable').sortable({
    start: function(e, ui) {
        // creates a temporary attribute on the element with the old index
        $(this).attr('data-previndex', ui.item.index());
    },
    update: function(e, ui) {
        // gets the new and old index then removes the temporary attribute
        var newIndex = ui.item.index();
        var oldIndex = $(this).attr('data-previndex');
        $(this).removeAttr('data-previndex');
    }
});

OR all within the update event (preferable):

$('#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();
        }    
});

However, as also mentioned in some comments on the question, this isn't working for me. I should perhaps mention that I'm using sortable in combination with AngularJS, specifically the wrapper provided by AngularUI. For the first example, I replaced $(this) with $(e.target).

Any clues as to why this isn't working, and how to get the desired result?

Community
  • 1
  • 1
Pim
  • 756
  • 1
  • 7
  • 18

1 Answers1

1

Ok, so I've found the solution:

$('#sortable').sortable({ 
    update: function(e, ui) {
        oldPos = ui.item.sortable.index;
        newPos = ui.item.sortable.dropindex;
    }
});

This is based on the extra properties that the AngularUI wrapper for Sortable provides.

Pim
  • 756
  • 1
  • 7
  • 18