Manually Update Angular-UI UI-Sortable Items

Question

Essentially, I would like users to be able to drag and drop an item or click up/down arrows to move an item in the list.

Is there a good way to update the items' indexes that plays nice with ui-sortable/angular-ui?

Thanks.

update

we were able to solve this by adding a function in our controller that would remove the item from the array and add it back in one index greater or lesser than its original position. Here is a sloppy example:

$scope.upDown = function(oldIndex, newIndex) {
    var item = $scope.list[oldIndex];
    $scope.list.splice(oldIndex,1);
    $scope.list.splice(newIndex,0,item);
};

http://jsfiddle.net/69auq/1/

you would need to add a check if it was the first or last elem in the array to disable up or down accordingly.

The moment the sort has stopped, which you can capture, the items on your scope will be in their new order. Push them, or the their ids to a service. — Darren Wainwright, Jul 25 '14 at 22:34

score 0 · Answer 1 · edited May 23 '17 at 12:21

As with everything AngularJS, the answer is to "think in Angular, not jQuery".

This CodePen does a good job illustrating how to do it. Basically, you've got a scoped temp object for the dragging around, which you then push into the ng-repeat's bound array. I can't take credit for it (not my creation), but Google led me to it fairly quickly. The CodePen doesn't use any external dependencies, but as you can see, it means a bit more work than using something like Angular-UI.

Here's a JSFiddle showing the same concept, but with Angular-UI dependency. The advantage of using angular-ui is that your bound data array needs only to be invoked as such:

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

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "three", "four", "five", "six"];
});

This means less work on your part, since it's already been figured out. AngularJS does a good job of playing nicely with jQuery, so this shouldn't dictate a huge shift in development approach from jQuery UI, depending on your use case.

this doesn't answer my question. I am using angular-ui which provides the drag and drop functionality. I also need to be able to move a single item up/down 1 index in the array with out dragging and dropping. — juliaallyce, Jul 25 '14 at 21:46
I guess I'm confused why you're trying to manipulate the list, which is already scoped, by invoking a function when the functionality is included by nature of manipulating the scoped data array. Also, I apparently missed your 'ui' dependency. Thanks for posting back your working solution. — Eric McCormick, Jul 31 '14 at 14:34

score 0 · Accepted Answer · answered Aug 19 '14 at 22:32

we were able to solve this by adding a function in our controller that would remove the item from the array and add it back in one index greater or lesser than its original position. Here is a sloppy example:

$scope.upDown = function(oldIndex, newIndex) {
    var item = $scope.list[oldIndex];
    $scope.list.splice(oldIndex,1);
    $scope.list.splice(newIndex,0,item);
};

http://jsfiddle.net/69auq/1/

you would need to add a check if it was the first or last elem in the array to disable up or down accordingly.

Manually Update Angular-UI UI-Sortable Items

update

2 Answers2