AngularUI UI-sortable Index Update Issue

Question

I am having a weird bug with AngularUI's ui-sortable directive. For the most part, dragging the elements seems fine where the index gets updated when an element is dragged into the new position. However, there are occurrences when it is not getting updated. I have created a repeatable instance where the issue comes up. On first run, drag the line 2 // two line down one row and the index is clearly not updated.

Is there a method to fix this?

HTML:

<section ng:controller="controller" ui-sortable ng-model="nums">
    <div ng-repeat="i in nums">
       {{$index}} // {{i}}
    </div>
</section>

JS:

var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
    $scope.nums = ['zero','one','two','three','four','five'];
});
angular.bootstrap(document, ['myapp']);

Jsfiddle: http://jsfiddle.net/jeffreyqua/hKYWr/1225/

Peter · Accepted Answer · 2014-02-26 01:08:44Z

3

The solution to your problem is much simpler than you would probably would have thought. You're using an old version of Angular-UI Sortable plugin that doesn't play well with newer jQuery plugins.

The latest one will fix your issue: https://github.com/angular-ui/ui-sortable/blob/c4b8e1b9ce8a7e0525aff3ca31f439e30c5b0347/src/sortable.js (The hash is so that it's pegged to a known working version. You can also make a local copy from master)

JS Fiddle with import of the newer version of sortable. http://jsfiddle.net/9eVEc/

Note that you will have to change your angular.module dependency to include ['ui.sortable'] instead of just ['ui'].

i.e.:

var myapp = angular.module('myapp', ['ui.sortable']);

answered Feb 26, 2014 at 1:08

Peter

6034 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

AngularUI UI-sortable Index Update Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related