1

I need a drag and drop list with angular, but I need the $scope.list change too because I must store the new order in my data base.

I found this answer and I used it to get this http://jsfiddle.net/aras7/9sueU/1/

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

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

angular.bootstrap(document, ['myapp']);

The problems is that when I try to change a element from top to down ONE possition is does NOT work.

For example take "one" and take it one position down to get "two,"one","three","four", ... second list should also change but it doesn't.

two
one
three
five
four
six
----------
one
two
three
five
four
six

both list should be equals.

Community
  • 1
  • 1
Andres
  • 4,323
  • 7
  • 39
  • 53
  • possible duplicate of [Drag and drop sortable ng:repeats in Angular.JS?](http://stackoverflow.com/questions/7354992/drag-and-drop-sortable-ngrepeats-in-angular-js) – Abraham Uribe May 26 '14 at 21:20
  • @AbrahamUribe I saw that question and tis accepted answer has the same problem, just see it http://jsfiddle.net/g/hKYWr/ – Andres May 26 '14 at 21:46
  • it seems to be a bug on ui sortable – Abraham Uribe May 26 '14 at 21:48
  • I thought that but I wasn't sure, any suggestion/advice? – Andres May 26 '14 at 21:49
  • 1
    you need to include the sortable.js [https://github.com/angular-ui/ui-sortable/tree/master/src](https://github.com/angular-ui/ui-sortable/tree/master/src) and start the module like this var myapp = angular.module('myapp', ['ui.sortable']); [http://jsfiddle.net/9sueU/3/](http://jsfiddle.net/9sueU/3/) – Abraham Uribe May 26 '14 at 22:01
  • yes @AbrahamUribe you are right, thank you very much, add it as an answer. – Andres May 26 '14 at 22:07

1 Answers1

0

to get the ui-sortable to work without bugs you need to add the sortable.js and start the module with ui.sortable like this 

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

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

angular.bootstrap(document, ['myapp']);

http://jsfiddle.net/9sueU/3/

Abraham Uribe
  • 3,118
  • 7
  • 26
  • 34
  • Is there any option to keep the drag and drop feature but remove the sortable one? I mean, drag and drop will be allowed between different lists only? – Ofir Jul 06 '14 at 08:48
  • It has a option `sort: false` to get disabled the sorting functionality. – aUXcoder Jan 22 '16 at 19:45