What do you do when you can't find something that you want? You do it yourself!

That's what I've done when I wasn't able to find a simple and clean AngularJS directive to be able to drag and drop elements. I also wanted to be able to bind some events. Nothing too fancy, start, stop and move would suffice.

On my quest for a package that could do what I wanted I've found a great one: Draggabilly.
I've found also an AngularJS directive that uses it, but I didn't like the way it was made, especially the part on how the events were triggered. It would work fine for a single draggable element, but when you had more than one it would fire the events many time as the number of draggable elements on your view.

I tried to make it simple and flexible, in a way that you can bind different events to every draggable element, and with only two directive attributes: options and events. Just set them on your scope and you're ready.

Check out this simple demo I've put up with the many available options you can add to your draggable elements. You can also check the code on my github repo, and if you like it please feel free to star it :)



ngDraggabilly - drag and drop for angular

A simple angular wrapper for Draggabilly.

There're similar packages already, but there's mainly two things makes this one different.

One is that is has an isolated scope.

The other is that it doesn't use $rootScope to emit drag and drop events. This way you if you have several draggable elements, it will only fire once for the one that you dragged, instead of fireing many times as the number of draggable elements.

Install

bower install ng-draggabilly

How to use

Add the attribute directive ng-draggabilly to the element, set an object with the options and another with the events.

Add dependency:

angular.module('yourApp', ['ngDraggabilly']);

Add to index.html:

<script src="bower_components/ng-draggabilly/src/ng-draggabilly.js"></script>

View:

<div ng-draggabilly options="opts" events="evts"></div>

Controller:

$scope.opts = {
    // use Draggabilly options here
};

$scope.evts = {
    dragStart = function (instance, event, pointer) {
        // whatever you want to do on dragstart event
    },
    dragMove = ...,
    dragEnd = ...
}

Demo

Here's a demo with many draggable elements with different options.