bevacqua/angularjs-dragula

:ok_hand: Drag and drop so simple it hurts

Nicolás Bevacqua is the Head of UI / UX Engineering at Ramp. As the published author of several JavaScript books (Mastering Modular JavaScript, O'Reilly 2018; Practical Modern JavaScript, O'Reilly 2017; JavaScript Application Design, Manning 2015) and the editor of Pony Foo, Nicolás has experience not only in working on JavaScript problems, but also in sharing his applied learning with others. You can find him on Twitter as @nzgb, and — if you're into cooking — on Instagram as @nbevacqua.

angularjs-dragula's Issues

Keep original appearence

Hello,

I have some divs in a board like parent div that when I drop them, their appearence is modified. See:

Before:

After:

I dropped "Tarefa 8" to "Tarefa 7" place.

Something I can do about it? I wish do keep the original appearence, always.

Dragular can't be used without RequireJS—not even with files inside dist

The files on dist folder are using requireJS, which makes it impossible to use in projects without it.

Can you generate a distribution version that doesn't use requireJS?

The file would have to assume angular variable is available for use—as it is common to see on other angular 3rd party modules.

Do not rely on scope

It should be possible to use it without ever using scope. It can use it internally, but it should not rely on scope in the future. Angular 2 has no scope.

Dups When Removing Item and Adding to Bag

version 1.2.0
When removing an item from one container to another, this error appears only in 1.2.0. Looks like item with key undefined is being added to the second collection
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: page in model. Duplicate key: undefined:undefined, Duplicate value: undefined

Drake containers get out of sync with models

Hey, thank you so much for this incredible tool. It's a joy to use.

I put together a drag and drop formbuilder in my Angular 1 application and it works very well. In addition to dragging in radio buttons, checkboxes, text inputs, etc, there are also sections that can be dragged in, which themselves contain dragula bags.

For the most part, everything still works well. I assign each section that's dragged in a unique class (by timestamping it), and am therefore able to copy in many sections and multiple levels of hierarchy.

However, sometimes when dragging and dropping sections within the form area, the drake.models and drake.containers array seem to get out of sync, producing unexpected behavior. Specifically, drake.containers appears to retain old timestamped bags (the bags are re-classed whenever they're dropped), which no longer exist in the DOM--yet, even introducing code that removes those bags only seems to exacerbate the problem.

Have you encountered this before? Any advice for a better approach that might forestall this? Any help you can offer is very much appreciated.

Thank you again!

Use with mdGridList

Hi,

I'm attempting to plug this into my Angular (1.4.5) project, which utilizes Angular Material (0.11.0).

<md-grid-list dragula="'bag-one'" dragula-scope="$parent"
                      md-gutter="30px"
                      md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3"
                      md-row-height="135px">

Attempting to set dragula on the grid-list ends up throwing this error:

[$compile:multidir] Multiple directives [dragula, mdGridList (module: material.components.gridList)] asking for new/isolated scope on: <md-grid-list dragula="'bag-one'" dragula-scope="$parent" md-gutter="30px" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3" md-row-height="135px">
http://errors.angularjs.org/1.4.5/$compile/multidir?p0=dragula&p1=&p2=mdGridList&p3=%20(module%3A%20material.components.gridList)&p4=new%2Fisolated<div md-tabs-template="::tab.template" md-connected-if="tab.isActive()" md-scope="::tab.parent" ng-if="$mdTabsCtrl.enableDisconnect || tab.shouldRender()" class="ng-scope ng-isolate-scope">cope&p5=%3Cmd-grid-list%dragula%3D%22'bag-one'%22%20dragula-scope%3D%22%24parent%22%20md-gutter%3D%2230px%22%20md-cols-sm%3D%221%22%20md-cols-md%3D%222%22%20md-cols-gt-md%3D%223%22%20md-row-height%3D%22135px%22%3E

Has anyone successfully used this plugin with the gridlist?

Thanks

ng2-dragula

I would love to do a direct port of this library to Angular2 if that's alright with you?

Planning on the port taking place here:
https://github.com/valor-software/ng2-dragula

We can work together on it or if anyone else would like to help, let me know. 👍

Sourcemapping Interference

Hi @bevacqua, you've included your own sourcemap on L1121 in dist/angular-dragula.js and it is interfering with our sourcemap. We'd suggest that you remove this sourcemap and allow the users to determine how they would like to build their own code.

Looses reference to model

When one loads items that should be rearranged async, it will loose its reference to the model object, so that subsequent writes to the object passed in as a parameter to dragula-model="" is lost.

Minification

First off, thanks for a very cool module.
Does the module work with minification? Minifying the code using standard Angular annotations to preserve dependency injection doesn't seem to work. Module works great if left un-minified.

Thanks,

Dean

copy = true, sorting elements in destination container not working

Setting copy = true, once elements are dropped in the destination container they can't be sorted (dragged and dropped within the destination container to a new position).

This functionality works if copy = false, and also works in the non-angular implementation of dragula in both cases (where copy = true, and copy = false)

bower copy conflicts with realmike33/angular-dragula

Hey man, was just in the neighbourhood, wanted to switch to bevacqua/angular-dragula, and event after cleaning my bower cache and uninstalling realmike33's version (it was great, but this has some scope management stuff I need) I found it still resolves to http://github.com/realmike33/angular-dragula. When installing from the github repo however, it installed fine. Just a heads up in case you guys are collab-ing. It may be the proxy here too, but just in case it isn't I thought I'd let you know.

using this without requireJS?

The current documentation shows the use of require statements. I'm trying to keep my project to a minimum, so I'd rather not include requireJS.

Can you please describe how to include angular-dragula into my module?

How to use angular-dragula without CommonJS ?

Hello,

I consider to use angular-dragula in my project as it looks really nice but it requires CommonJS in order to get initialization but we do not use CommonJS in the project. How to use angular-dragula in this case ?

Thank you

drop-model event not emitted

Hello guys,

I'm trying out the angular version of dragula, and have this code in my view:

tbody( dragula='"badges-bag"' dragula-model='vm.badgeList' )

And this other code in my controller:

$scope.$on( 'badges-bag.drop-model', function( el, target, source ) {

The problem is that I'm not receiving the drop-modelevent. dragendand dropworks just fine.
What could be the reason?

No tests?

I just noticed this project has no unit tests. I know it's just supposed to be a wrapper around Dragula, which has coverage, but the service.js looks to me pretty large. Not having unit tests really decreases my confidence in using this.

A co-worker of mine recently noticed something broke when upgrading to version 1.2.0 from version 1.1.6. The details of the error are irrelevant to this issue -- she may open a different issue about that.

I'm just curious if there's something preventing the contributors of this project from writing unit tests for it? Or is everyone just too busy with other things?

Error when building - directive.js: line 27, col 19, 'drake' is already defined. 1 error

How to trigger drag after a delay - on touch and hold for x ms?

I need to be able to disable drag and only enable it when the user holds an item for x ms. What is the best way to achieve this?

dropIndex is off if the target container is the mirror container

In order to make nested css rules work while dragging, I use the drag/drop containers as mirror containers. That works fine, except for the dropIndex being off due to the fact that the mirror is still inside the target container when dropping the transit element. Possible fix:

function domIndexOf(child, parent) {
      /*
            If the mirror container is the target container itself, the mirror is still inside the target when
            dropping the transit element. Thats why we have to make sure to ignore the mirror element here. 
      */
      var children = angular.element(parent).children().not('.gu-mirror');
      return Array.prototype.indexOf.call(children, child);
  }

Thank you for this great plugin by the way!

models are lost when inside ng-if

Hi there,

In the following example I have to sections :

• one containing templates
• and another one containing a table

the templates section is used to build the table and fill it with items.
templates are either Rows, or Items.

if the table contains no rows, I do not want to have the template items on the DOM altogether.
so I am wrapping the template area with ngif.
trouble is, dragula-model won't reflect what really is in the templates model when you drag an item from the templates section.

https://plnkr.co/edit/sQPfDeUqfJ3FpPvVElp6?p=preview

Can't scroll or zoom on iOS Safari

On http://bevacqua.github.io/angular-dragula I can drag and drop just fine in Safari but can't scroll the page or pinch to zoom.

Versions
iOS: 8.4

drop-model event is never fired when model data is loaded via a promise

Here is an example reproducing the bug: http://jsfiddle.net/mr0pear7/2/

Am I missing something?

Add option to enable/disable drag

I want to be able to enable/disable the drag functionality via an option parameter.

For example I want to make a toggle button that enables dragging when the user is in edit mode, so I will be able to do something like dragula.options.enableDrag = true; and enable the dragging and dragula.options.enableDrag = false; to disable it.

Thanks for this neat module.

example.js is empty

Latest commit deleted the entire content of example.js file.

Event on model sync

Hello,

at first thanks for the well working framework. Especially for the new feature of syncing the model via dragula-model.
I ve one problem. I would like to do some stuff after the sync of the model. The drop event isn´t helpful. On this event the model will be synced asychron. So the sync isn´t finished when i´m receiving the drop event.

Everyone who´s using the dragula-model can´t use the existing drop event. My advise would be to add an broadcast in the service.js after line 46.

Thanks,
Daniel

css

As far as I can tell the associated CSS is not included in the NPM module. Perhaps needs an update.

Many thanks for the work.

Nested bags

Hi.

I want to make a nested bags structure. Something like this:

As you can see items 12 and 80 are in one bag ("Parent") and items 25, 67 and 36 in other ("Child") which is inside item 12.
I also have overridden moves that dragging works when clicking on handle (as in example).

Drag and drop Parent's items works as expected, but when i try to move Child's item, item 12 starts dragging also.

Not sure if it's a bug or i'm doing something wrong. scope.$emit.apply(scope, args); in replicateEvents function looks suspicious for me: Child's item's click event event bubbles to the Parent's item. Maybe i'm wrong.

Different options for containers in same bag

HTML

<div class="col-sm-6" dragula='"widgets-elements"' style="border:1px solid purple; padding: 10px;">
  <div style="padding: 5px; border: 1px solid red;">Widget 01</div>
  <div style="padding: 5px; border: 1px solid red;">Widget 02</div>
  <div style="padding: 5px; border: 1px solid red;">Widget 03</div>
</div>
<div class="col-sm-6" dragula='"widgets-container"' style="border:1px solid #000; padding: 10px;">
  <div style="padding: 5px; border: 1px solid red;">Widget 01</div>
  <div style="padding: 5px; border: 1px solid red;">Widget 02</div>
  <div style="padding: 5px; border: 1px solid red;">Widget 03</div>
</div>

JS

dragulaService.options($rootScope, 'widgets-elements', {
  copy: true
});
dragulaService.options($rootScope, 'widgets-container', {
  removeOnSpill: true
});

How can I use drop event inside dragulaservice.options?

I was using dragular (jquery version), and now, I just started to use the angular version.
But, I can't handle the Drop event inside the options of dragular service.
I'm trying to use this way:

dragulaService.options($scope, 'tasks', {

          moves: function (el, source, handle, sibling) {
            return true;                  
          },
          accepts: function (el, target, source, sibling) { 

           var owner_id   = parseInt($($(el).find('li')[0]).attr('userid')),
               user_id    = $cookies.getObject('user').id,
               user_name  = $(el).find('img')[0].title,
               id         = $(el).find('h3').html(),
               id         = id.replace(/#/g, "");

            if(user_id != owner_id){

                ngDialog.open({ 
                    plain: true,
                     template:'<p>Tem certeza que deseja assumir essa tarefa destinada há '+user_name+' ?</p>\
                     <div class="ngdialog-buttons"><button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">\
                     Não</button><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm()">Sim</button></div>',
                    scope: $scope
                });

                $scope.confirm =function(){

                    $scope.setOwner(id, user_id);
                    ngDialog.close();
                }

                return false;
            }

            console.log(target.id); 

            switch(source.id){
                case "A":
                    return target.id == "D";
                break;

                case "D":
                    return target.id !== "P";
                break;

                case "T":
                    return true;
                break;

                case "P":
                    return true;
                break;
            }

          },
          revertOnSpill: false,               
          removeOnSpill: false                
        });

Where I can put the drop event to know when the "task" is dropped in another place?

PS:: sorry for the bad english..

Dynamic bag name

I'm trying to create dynamics names to avoid the Multiple Directives error, but with the double quotes used in the bag name the value is interpreted as text even if I use {{}}

<h2>Activity</h2>
                      <div flex ng-cloak ng-repeat="module in modules">
                        <md-grid-list
                                md-cols="{{days.length}}" md-cols-sm="{{days.length}}" md-cols-md="{{days.length}}" md-cols-gt-md="{{days.length}}"
                                md-row-height-gt-md="1:1" md-row-height="1:1"
                                md-gutter="8px" md-gutter-gt-sm="4px" >
                            <md-grid-tile ng-repeat="day in days"
                                        md-rowspan="1"
                                        md-colspan="1"
                                        md-colspan-sm="1" ng-class="day.background" dragula='"{{"bag-" + day.name + "-" + module}}"'>
                            <!--<md-icon md-svg-icon="{{tile.icon}}"></md-icon>-->
                            <md-grid-tile-footer><h3>{{day.name}}</h3></md-grid-tile-footer>{{day.name}}
                            </md-grid-tile>
                        </md-grid-list>
                      </div>

dragula-model events

When I add options with dragulaService.options, bag was added, then in link fuction models just added to drake.models, without handleModels, so model's events doesn't work.

Events won't get replicated if bag was setup using dragulaService

You can check this by trying by adding this line to ExampleCtrl controller in the example.js:

dragulaService.options($scope, 'second-bag', {});

after this events won't fire anymore.

work with promises

I'm trying to modify the order of the elements of an array from a promise but i can't, anyone have an idea how to do this?

Thanks!

installation via npm (version)

Hi guys,
the package.json is set to 1.0.13 but via npm only version 1.0.12 is available. I though that npm just links to this repo but it does´t seem so?

Greetings,
Daniel

How to drag and drop on mobile ?

Thanks for your library it very good, but now i need it can drag and drop on mobile, can you support it ?

DOM and model array are not synced

When I use your example with ngRepeat:

function ($scope) {
    $scope.many = ['The', 'possibilities', 'are', 'endless!'];
  }

And I change order or remove some items..
How can I get updated 'many' array?

Ng-repeat with search filter brings back the items from other div or "first:bag"

 Search by Outward Code: <input type="text" ng-model="search.Name">
    <div class='container' dragula='"first-bag"' style="border:1px solid gray;padding:10px;margin:10px">
        <div ng-repeat="owc in outWardCodes| filter:search | limitTo:5">{{owc.Name}} {{owc.Country}}</div>
    </div>
  <div dragula='"first-bag"'>
            <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
    </div>

When I drag an element from ng-repeat dive to the below bag and search again it fetches the records from that div back into ng-repeat div.

Can't apply on the table rows <tr> which has ng-repeat.

 <table class="table container" show-filter="filter" dragula='"first-bag"' >
            <tr ng-repeat="item in data" ng-class="{'active': item.$selected}"  dragula-scope='$parent'>
                <td table-index item="item" on-check=";" data-title="'#'"></td>

                <td data-title="'Outward Code'" filter="{'Name':'text'}">
                    {{item.Name}}
                </td>
                <td data-title="'Country'" filter="{'Country':'text'}">
                    {{item.Country}}
                </td>
            </tr>
    </table>

It starts dragging each of the TD instead of complete row.

AngularDragula doesnt work with meteor

Hi,

I copy pasted the js inside public/compatibility, and the file gets imported correctly.

Then in my app, I have :

console.log(window);
console.log(window.angularDragula);

angular.module('socially', [
 'angular-meteor',
 'ui.router',
 'accounts.ui',
 'angularUtils.directives.dirPagination',
 'uiGmapgoogle-maps',
 'ui.bootstrap',
 window.angularDragula(angular)
]);

Strangely enough, the first log shows that window has a property called angularDracula, and this is a register function taking angular as a parameter.
Although, the second console shows undefined

I renamed the file 00-angular-dragula.js to make sure the file is loaded before the others.

I am thinking to refactor this AMD logic of yours, but this is a nightmare (for me) - as I only use require for node - and don't see the logic in this file.

Cannot use dragula on existing directive

Thanks for the great drag-drop framework!

I ran into an issue while integrating it into my project and I thought worth opening an issue.

I initially wanted to apply the dragula directive to an element containing another directive but got an error. Turns out dragula requires a new/isolated scope and thus cannot be applied to elements containing another directive with new/isolated scope. A workaround I'm trying out myself is to read the attributes inside link() and use $parse to re-hydrate their value. So far it appears to be working.

Thanks again!

Issue with custom directive

I have a custom angular template directive, with some html displaying some info,
now in that directive in the link function i do some initialization of my model, basically some defaults on the view.
Now elsewhere on my app, i present a list of items using angular-dragula
when i drag them to the other container (the one that will contain a list of items of my custom directive) everything works fine, the link function is called and the template is initialized only when i drag to the bottom if i drag to the top (when there is already an item on the list) or between items, the link function is not called and as such my template directive is not initialized.

Drop model

I'm using angular-dragula to move "orders" from this container

        <md-list dragula="'bag-a'" dragula-model='vm.orders'>
            <md-list-item class="md-3-line md-long-text" ng-repeat="order in vm.orders">

to this

I cannot figure out how a can get access to "order" model and do things using the drop-model event.

    $scope.$on('bag-a.drop-model', function (el, target, source) {

/// do things with order and car here..........
console.log(el, target, source);
});
Any help ?

Cannot use dragula with angular

I don't understand how should I initialize the dragula module.
I've tried

angular.module('app', [
 ...
'ui.router',
'dragula',
'ngMaterial',
'pascalprecht.translate',
...
]);

but it didn't work.

Then I've tried

angular.module('angular-dragula', [angularDragula(angular)]);

but it complains that 'angularDragula' is not defined.
Can you be more explicit than using the dist? Why this is not an angular module like all the others (material, translate, etc)?

Failed to removeChild when Removing Item and Adding to Bag

Hi, thanks for fixing the earlier issue in 1.2.0. I think 1.2.1 may still have some existing issues that have not been entirely addressed.

old dragula: http://plnkr.co/edit/KHBlBUTXU57l4VD79TmJ?p=preview
dragula 1.2.1: http://plnkr.co/edit/XPgk4ImKFGu9Mu1PpAIo?p=preview

In dragula 1.2.1, please see that you can no longer reorder elements in bag 1. (Please verify ). Then drag an element from bag 1 to bag 2. Console Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

.on('remove'...) not working correctly

I am making a simple dragula image cloner with the possibility to remove images from the target element as well. This is my first time using Dragula, but I think this is a bug.

Using:

.on('drop', function(target) { var comDiv = findAncestor(target.parentNode, "myclass"); comDiv.setAttribute("c", "c"); })

I can successfully add an attribute to a parent div (findAncestor is a function to ... find an ancestor). It is no problem to remove images as expected. For some reason, I must add the .parentNode or this does not work.

However, If I add:

.on('remove', function(source) { var comDiv = findAncestor(source.parentNode, "myclass"); comDiv.setAttribute("c", "c"); })

I can no longer properly remove images: instead of disappearing, they remain visible outside of the source container, and if I drag that image it fires the event again. Further, I get a JS error: Uncaught TypeError: Cannot read property 'parentNode' of null

I looked a bit into the source but did not manage to locate what might be causing this.

Replicating the "Copying stuff from only one of the containers and sorting on the other one?" example

I am trying to replicate the functionality of the origin dragula example called Copying stuff from only one of the containers and sorting on the other one? No problem! in Angular.

I have looked through your code, but can't figure how to replicate it in Angular. Is it even possible with the two dropzones being the same bag?

dragula area inside ng-repeat

Hi all,

I'm trying to achieve something like this:

<div ng-repeat="dropArea in areas" style="padding:10px;">
    <div class="titile">{{ dropArea.title }}</div>
    <div dragula='"myBag"'></div>
</div>

is it possible? the only way to get close is to have the dragula='"myBag"' on the ng-repeat div.

Thanks

Setting options causes exception on drop

Everything works OK, until I introduce this bit of code:

      dragulaService.options($scope, 'rearrange', {
        moves: function (el, container, handle) {
          return true;
        }
      });

When something is dropped I get an exception.

dragula-model issue with "dynamic" model

If we have a model index by a value that changes dynamically like
dragula-model="tabs[selectedIdx]" in which the initial selectedIdx equals 0 then angular-dragula just won't work as expected, since changing selectedIdx to something other then 0 and doing drag and drop operations, those operations will still be made on index 0.

here is a fiddler http://jsfiddle.net/36meLf7r/

Add some items to the first tab, then select tab 1 again add some items, and one can see that no item will be added to the second tab going back to the tab 0 the items added while on tab 1 will be on tab 0 .

Events are working

The event replication isn't working for me.

The following prints the element and container properly to my console:

    dragulaService.options($scope, 'drag', {
      containers: Array.prototype.slice.call(document.querySelectorAll('ul.schedule-list'))
    });

    dragulaService.find($scope, 'drag').drake.on('drop', function(el, drop, source) {
      console.log(el, 'el');
      console.log(drop, 'drop');
    });

While this does nothing:

    dragulaService.options($scope, 'drag', {
      containers: Array.prototype.slice.call(document.querySelectorAll('ul.schedule-list'))
    });

    $scope.$on('drag.drop', function(el, drop, source) {
      console.log(el, 'el');
      console.log(drop, 'drop');
    });