Drag and drop so simple it hurts
Official Angular wrapper for dragula.
Try out the demo!
You can get it on npm.
npm install angularjs-dragula --saveOr bower, too.
bower install angularjs-dragula --saveYou'll need to pass in angularDragula to your module when booting up your application. angularjs-dragula takes your angular instance and uses it to register its own module, service, and directive.
var angular = require('angular');
var angularDragula = require('angularjs-dragula');
var app = angular.module('my-app', [angularDragula(angular)]);This package isn't very different from dragula itself. I'll mark the differences here, but please refer to the documentation for dragula if you need to learn more about dragula itself.<
8000
/p>
There's a dragula directive (as seen in the demo) that allows you to group containers together, as long as they belong to the same scope. That grouping of containers is called a bag.
<div dragula='"bag-one"'></div>
<div dragula='"bag-one"'></div>
<div dragula='"bag-two"'></div>ng-repeat creates a new isolate scope, which can sometimes cause issues with dragging between a bag with multiple containers. To avoid this you can pass in the scope you want the bag to be stored on (and fire events on) by setting the dragula-scope directive on the bag element.
<ul ng-controller="ItemsController">
<li ng-repeat="item in items" dragula='"bag-one"' dragula-scope="$parent"></li>
</ul>If your ng-repeat is compiled from array, you may wish to have it synced. For that purpose you need to provide model by setting the dragula-model attribute on the bag element
<ul ng-controller="ItemsController">
<li ng-repeat="item in items" dragula='"bag-one"' dragula-model="items"></li>
</ul>The standard drop event is fired before the model is synced. For that purpose you need to use the drop-model event. The same behavior exists in the remove event. Therefore is the remove-model event. Further details are available under Events
If you need to configure the drake (there's only one drake per bag), you'll have to use the dragulaService.
app.controller('ExampleCtrl', ['$scope', 'dragulaService',
function ($scope, dragulaService) {
dragulaService.options($scope, 'third-bag', {
removeOnSpill: true
});
}
]);Whenever a drake instance created with the dragula directive emits an event, that event is replicated on the Angular $scope where the drake has an associated bag, and prefixed with the name on its bag.
<div dragula='"evented-bag"'></div>app.controller('ExampleCtrl', ['$scope', function ($scope) {
$scope
.$on('evented-bag.over', function (e, el) {
el.addClass('over');
})
.$on('evented-bag.out', function (e, el) {
el.removeClass('over');
});
]);Note that these derived events don't expose the DOM elements directly. The elements get wrapped in angular.element calls.
| Event Name | Listener Arguments | Event Description |
|---|---|---|
| drop-model | el, target, source | same as normal drop, but model was synced, just available with the use of dragula-model |
| remove-model | el, container | same as normal remove, but model was synced, just available with the use of dragula-model |
This service exposes a few different methods with which you can interact with dragula in the Angular way.
Creates a bag scoped under scope and identified by name. You should provide the entire drake instance. Typically, the directive takes care of this step.
Sets the options used to instantiate a drake. Refer to the documentation for dragula to learn more about the options themselves.
Returns the bag for a drake instance. Contains the following properties.
nameis the name that identifies the bag underscopedrakeis the rawdrakeinstance itself
Destroys a drake instance named name scoped under scope.
MIT