Lightweight drag and drop with angular using directives and HTML5
2.6kb minified, 0,54kb 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
Drag element
.drag
When drag element hovers another drag element
.drag.hover
When .drag is being dragged
.drag.dragging
Drop area
.drop
When .drag is being dragged appended to .drop
.drop.dropable
When drag element hovers a drop element
.drop.dropable.hover$ grunt