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