Angular Sortable events work differently than using JQuery

Question

I'm seeing differences in the sortable events from JQuery Sortable and Angular Sortable although my understanding is that the Angular events and options should the same as JQuery:

"All the jQueryUI Sortable options can be passed through the directive." https://github.com/angular-ui/ui-sortable

The following shows a jquery sortable. When an item is dragged and dropped an alert shows the index of the dropped item AFTER its dropped. http://jsfiddle.net/L7jemdbh/

$(".sort-list-horizontal").sortable({containment: 'parent', tolerance: "pointer" })
    .on( "sortupdate", function( event, ui ) { alert(ui.item.index()); } );

The same sortable using Angular has the same alert however it shows the item's index BEFORE the item is dropped. http://jsfiddle.net/zobgawqt/

$scope.sortableOptions = {
    tolerance: 'pointer',
    update: function(event, ui) { alert(ui.item.index()); }
};

Why is the Angular version different? How do I find the index after the drop?

(I also note that the containment option works in the jquery version but not in the Angular version so I've turned it off)

ryeballar · Accepted Answer · 2014-08-21 18:05:59Z

2

I don't know how Angular Sortable does it job in handling event updates but one way to ensure that your procedure runs when all updates are invoked in angularjs is to wrap it in a $timeout.

FORKED FIDDLE

Change:

$scope.sortableOptions = {
    tolerance: 'pointer',
    update: function(event, ui) { alert(ui.item.index()); }
};

to

$scope.sortableOptions = {
    tolerance: 'pointer',
    update: function(event, ui) { 
       $timeout(function(){
          alert(ui.item.index()); 
       });

    }
};

answered Aug 21, 2014 at 18:05

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Flippance Over a year ago

hmm, this helped in the jsfiddle but not in my app.

Collectives™ on Stack Overflow

Angular Sortable events work differently than using JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related