angular-drag-drop

Drag and drop with angular using directives and HTML5

Angular Core Dependency: ~1.2.3

Module License: MIT

Added by: Sam Deering

GitHub

Repository

fisshy/angular-drag-drop

Stats

Stars: 38

Watchers: 38

Forks: 20

Author

Joachim
Joachim

Module Description

Angular - Drag and Drop

Lightweight drag and drop with angular using directives and HTML5

2.6kb minified, 0,54kb gzipped

See example page for setup

Install

With bower:

$ bower install angular-dragndrop

Controller

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);
    };

});

Drop

<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

Drag

<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

CSS

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

Building

$ grunt

Module stats last updated: 2017-08-18 16:00:06

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!