Lightweight drag and drop with angular using directives and HTML5
2.1kb minified, 0,47kb gzipped
See example page for setup
With bower:
$ bower install angular-dragndrop
angular.module('myApp', ['dragAndDrop'])
.controller('MyCntrl', function($scope){
$scope.cars = [
{ name : 'Volvo' },
{ name : 'Audi' },
{ name : 'BMW' },
{ name : 'Mercedes' }
];
$scope.sold = [ { name : 'Volvo' } ];
$scope.moveToSold = function(car, element) {
var index = $scope.cars.indexOf(car);
$scope.cars.splice(index, 1);
$scope.sold.push(car);
};
});<div drop="moveToSold">
<div ng-repeat="car in sold">{{ car.name }}</div>
<div>Options
drop - Takes a function thats called when drag is dropped
enter - Takes a function thats called when drag enters drop-area
leave - Takes a function thats called when drag leaves drop-area
<div ng-repeat="car in cars" drag ng-model="car">{{ car.name }}<div>Options
ng-model * - Context of the current drag item.
start - Takes a function to be called when drag starts
end - Takes a function to be called when drag ends
Exampel of usage
$ grunt