angular-dragula

:ok_hand: Drag and drop so simple it hurts

Subscribe to updates I use angular-dragula


Statistics on angular-dragula

Number of watchers on Github 465
Number of open issues 45
Average time to close an issue 8 days
Main language HTML
Average time to merge a PR 2 days
Open pull requests 9+
Closed pull requests 1+
Last commit 8 months ago
Repo Created about 2 years ago
Repo Last Updated 4 months ago
Size 1.33 MB
Homepage http://bevacqua.g...
Organization / Authorbevacqua
Latest Releasev1.2.2
Contributors6
Page Updated
Do you use angular-dragula? Leave a review!
View open issues (45)
View angular-dragula activity
View on github
Latest Open Source Launches
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating angular-dragula for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

logo.png

Drag and drop so simple it hurts

Official Angular wrapper for dragula.

Demo

demo.png

Try out the demo!

Install

You can get it on npm.

npm install angularjs-dragula --save

Or bower, too.

bower install angularjs-dragula --save

Setup

You'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)]);

Usage

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.

Directive

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>

dragula-scope

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>

dragula-model

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

drake options

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

Events

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.

Special Events for angularjs-dragula

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

dragulaService

This service exposes a few different methods with which you can interact with dragula in the Angular way.

dragulaService.add(scope, name, drake)

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.

dragulaService.options(scope, name, options)

Sets the options used to instantiate a drake. Refer to the documentation for dragula to learn more about the options themselves.

dragulaService.find(scope, name)

Returns the bag for a drake instance. Contains the following properties.

  • name is the name that identifies the bag under scope
  • drake is the raw drake instance itself

dragulaService.destroy(scope, name)

Destroys a drake instance named name scoped under scope.

License

MIT

angular-dragula open issues Ask a question     (View All Issues)
  • 11 months is it good to send dropElmModel with 'drop-model'?
  • 11 months Ability to specify placeholder item
  • 11 months Drag and drop action will be frozen for no reason
  • 12 months Models and containers in different order making dropped elements show up in wrong containers
  • 12 months Unexpected behavior on third level nested tables
  • 12 months dragula - always drag to the list end
  • about 1 year dragula directive should remove the container on "$destroy" of its element
  • about 1 year Mix of $rootScope and $scope with different bag not updating the model
  • about 1 year Selenium Drag doesn't fire drag emit
  • about 1 year Any way to drag and drop nested Firebase objects instead of arrays?
  • about 1 year can not drop at all
  • about 1 year How to do this: dragula-model='{{vm.myvar}}' ??
  • about 1 year Multiple Drag and Drop
  • about 1 year Scroll & Scroll between bags
  • about 1 year RequireJS
  • about 1 year ngRepeat:dupes error, with source or destaination items being replaced with null
  • about 1 year How to get drag and drop target and source
  • over 1 year le.moves is not a function
  • over 1 year Dragging & dropping element outside any dragular container
  • over 1 year Windows phone not working
  • over 1 year Pass value in controller
  • over 1 year drake container is not removed when dom element is removed
  • over 1 year Dragging elements without preview leads to strange offset
  • over 1 year How to place dragging element on drop position?
  • over 1 year Is it possible to disable the draggability without removing the directive?
  • over 1 year Uncaught ReferenceError: angularDragula is not defined
  • over 1 year models are lost when inside ng-if
  • over 1 year Cannot use dragula on existing directive
  • over 1 year Dynamic bag name
  • about 2 years Do not rely on scope
angular-dragula open pull requests (View All Pulls)
  • Snap mirror container to cursor as specified in options. Originally ā€¦
  • Remove container from drake containers array when directive element iā€¦
  • Fix for drake drop error
  • Remove the container on element's "$destroy"
  • model data with model events
  • Bugs #100, #103 and #109 fixed
  • Fix filenames and expose models on drop and remove
  • Fix filenames that were still angular-dragula to angular-dragulajs
  • fixed reference to angular-dragula.js in index page
angular-dragula questions on Stackoverflow (View All Questions)
  • Using Angular Dragula without RequireJS
angular-dragula list of languages used
angular-dragula latest release notes
v1.2.2 Body of Lies

fixes #47

v1.2.1 The Postman Always Rings Twice
  • fixes #45
v1.2.0 Mr. Right
  • Starting to doing better releases
  • Fix issue with drake.models not being defined
  • Keep model in sync
  • Fix model watcher
Other projects in HTML