CODEWITHSUNDEEP
jqueryangularjsdrag-and-dropevent-handlingdom-events
Andres
Andres

Reputation: 4501

Angular: Catch Drag and Drop event

I use angular-ui to get a list which can be sorted with "drag and drop", it works fine.

just like this(works fine):

index.html

<ul ui-sortable ng-model="list">
    <li ng-repeat="item in list" class="item">{{item}}</li>
</ul>

app.js

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

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

Now, I need to know when the list(It could be a lot of list with this behaviour) is changed, I tried drop, dropend, drag, ... but didn't get it.

here my code http://jsfiddle.net/9sueU/4/

I need it to work with multiples list like here http://jsfiddle.net/b5nqd/1/

Upvotes: 0

Views: 994

Answers (2)

Guillaume Besson
Guillaume Besson

Reputation: 572

When sorting your list, angular-ui will change the array order directly. You can use $scope.$watch to listen to the change event of your list array.

$scope.$watch("list", function (value) {
    console.log("Changed !", value);
}, true);

You need to pass the third argument as true to force Angular to verify the change with angular.equals instead of a basic reference equality. Indeed, the array reference doesn't change, it's still the same array, but its content is modified so only angular.equals can differentiate the two.

Upvotes: 1

Erik Donohoo
Erik Donohoo

Reputation: 653

You need to watch the collection for changes. Angular will let you know even if the order has changed

$scope.$watchCollection('list', function (newVal, oldVal) {
    // DO something
});

I have updated your fiddle here

Upvotes: 1

Related Questions