AngularJS 1.x Drag and Drop directives (jQuery UI)

Demo:

• Demo1

Features:

• Support all features of jQuery UI draggable and droppable
• Easy configuration global and per element
• Small code size (if you already use jQuery and jQuery UI in your project)

Get Started:

(1) Install using bower

bower install angular-drag-and-drop --save

(2) Include drag_n_drop.js in your index.html, after including jQuery, jQuery UI and Angular (you can skip this if you use something like wiredep)

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jqueryui/jquery-ui.js"></script>
<script src="bower_components/angular-drag-and-drop/drag_n_drop.js"></script>

(3) Add 'drag_n_drop' to your main module's list of dependencies

angular.module('myModuleName', ['drag_n_drop'])

How to use

Add dnd-draggable on element that you want to be able to drag:

<span dnd-draggable>I'm draggable!!</span>

Add dnd-droppable on element that you want to be able to accept draggable elements:

<div dnd-droppable on-drop="dropElement(draggableScope)"></div>

You can use draggableScope to access variables that defined on scope of dropped draggable element. Add implementation of the on-drop handler to your controller.

$scope.dropElement = function(draggableScope) {
    //do something here
};

dndDragAndDropConfigProvider

Can be used to pass the default global parameters for other directives.

angular.module('MyApp').config(['dndDragAndDropConfigProvider', function(dndDragAndDropConfigProvider) {
    dndDragAndDropConfigProvider.setGlobalDroppableOptions({
        //parameters here (see options for dnd-droppable)
    });
    
    dndDragAndDropConfigProvider.setGlobalDraggableOptions({
        //parameters here (see options for dnd-draggable)
    });
}]);

dnd-draggable directive

Marks element as draggable.

Can have additional options in config object:

<div dnd-draggable="options"></div>

"options" can be defined on scope or inside html.

Next options is supported according to the jQuery UI 1.11.4 documentation

• addClasses
• appendTo
• axis
• cancel
• connectToSortable
• containment
• cursor
• cursorAt
• delay
• disabled
• distance
• grid
• handle
• helper
• iframeFix
• opacity
• refreshPositions
• revert
• revertDuration
• scope
• scroll
• scrollSensitivity
• scrollSpeed
• snap
• snapMode
• snapTolerance
• stack
• zIndex

You can use watchOptions property to provide array of options that will be watched using $scope.$watch. Corresponding properties have to be strings with watch expressions.

You can also setup next handlers on-create, on-drag, on-start and on-stop. Example:

<div dnd-draggable on-start="startDrag($event, draggableScope)"></div>

In each handler you can use $event object and draggableScope object(probably useless in this case).

dnd-droppable directive

Marks element as area to drop draggable elements.

Can have additional options in config object:

<div dnd-droppable="options"></div>

"options" can be defined on scope or inside html.

Next options is supported according to the jQuery UI 1.11.4 documentation

• accept
• activeClass
• addClasses
• disabled
• greedy
• hoverClass
• scope
• tolerance

Next handlers can be setup:

• on-accept
• on-activate
• on-create
• on-deactivate
• on-drop
• on-out
• on-over

In all handlers except accept handler you can use draggableScope, droppableScope and $event. In accept handler only draggableScope and droppableScope are available. Accept handler must return true if draggable should be accepted.

watchOptions should work the same way as for dnd-draggable directive.

Bug reports, tests and PRs are welcome