Add Drag and Drop Functionality To An AngularJs Application

AngularJs: Easily add Drag and Drop functionality using Dragula

To install Dragula, you can:

1. Using npm : npm install angularjs-dragula

2. Using Bower : bower install angularjs-dragula

To add it to your application, you can do the following:

var app = angular.module('sampleApplication', [angularDragula(angular)])

If you are injecting any other modules in your angular application make sure to add them first, and add dragula at the end, otherwise the application will throw an error.

Using Dragula:

Dragula provides the following directives, that you can use in your applications' views:

1. dragula : Use this to specify, the collection/bag to which items/elements will belong
   and the Containers from where you want to be able to drag/drop elements to/from.
2. dragula-scope : Its optional, you can use this to mention the scope dragula
   should use internally for adding/removing elements.
3. dragula-model : If, you are loading the items/elements from your controller, specify the model you use here,
   so that dragula can update the items automatically in the event of any changes to it.
    

A Simple example to drag&drop for elements defined in your html view:
 

            <!-- Container One -->
            <ul id="container1" dragula='"items-collection"'>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
            </ul>
            <!-- Container Two -->
            <ul id="container2" dragula='"items-collection"'>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
            </ul>

The above code, will make all the listed items draggable, to and from the above mentioned two containers.

Example for using dragula with ngRepeat :

Let's say we have two collections defined in our controller, namely items1 and items2 as follows:

$scope.items1 = [{ item:'1'},{ item:'2'},{ item:'3'}];

$scope.items2 = [{ item:'4'},{ item:'5'},{ item:'6'}];

The view would be as follows:

        <!-- Container One -->
        <ul id="container1" dragula='"items-collection"' dragula-model="items1">
            <li ng-repeat="item in items1">{{item.item}}</li>
        </ul>
        <!-- Container Two -->
        <ul id="container2" dragula='"items-collection"' dragula-model="items2">
            <li ng-repeat="item in items2">{{item.item}}</li>
        </ul>

Now, in addition to making the individual items in items1 and items2 draggable, Dragula will also update the items1 and items2 models accordingly.

So, if the user drags the item 6 to container1 from container2, item 6 will be added to the items1 collection in position it has been dragged to and removed from the items2 collection.