Comparing the shopping cart demo on jQuery UI with the shopping cart demo of angular-dragdrop, the behaviour is different. The jQuery UI version allows you to drag multiple instances of an item which makes sense for a shopping cart. I should be able to add multiple copies of the same product to my cart. In the angular drag drop example this is not possible. I can only have one of every item. Is there something I am missing or is this an error?

Thanks,
Raleigh

We are building an application using angular drag-drop. So I wanted to know whether it supports for iPad. Please let me know.

The shopping cart demo at

http://codef0rmer.github.io/angular-dragdrop/#/cart

Doesn't work. It doesn't clone, and you can drag items back into the wrong product section.

However the demo seems to work when I download the code.

It looks like the problem was that Fix #37 hasn't been applied.

Perhaps boosting the version number is a good idea. I didn't expect two minified copies of 1.0.3 to be functionally different.

Hello,

I've been testing your code, and it looks great, but I had an issue when I wanted to have nested list to be draggable and droppable. For example I have something like this:

sections = [section1-objetc, section2-object, sectionn-object], 

each section-object has a list:

section1-object = {'title': section1 title', 'elements': [elem1, elem2, elem3]}. 

I used this code more less:

<li class="section-container" data-ng-repeat="item in sections">
    <ul data-drop="true" ng-model="sections" jqyoui-droppable="{index: {{$index}}}">
        <div data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="sections" jqyoui-draggable="{index: {{$index}}, placeholder:true, animate:true}">
           <div data-ng-repeat="element in item.elements">
               <div class="droppable-container" data-drop="true" ng-model="item.learning_pages" jqyoui-droppable="{index: {{$index}}}">
                    <li data-drag="true" data-jqyoui-options="{revert: 'invalid''}" ng-model="item.elements" jqyoui-draggable="{index: {{$index}}, placeholder:true, animate:true}">{{element.title}}</li>
                </div>
            </div>
        </div>
    </ul>
</li>

The problem seems to be the "index" variable, that is being updated from the "sections" or from the "elements" depending of what array is manipulated when the user tries to drag and drop. Therefore, everything is broken in this case, and at the end only one list works. Maybe if we can attach the "index" var to the ng-model, or give a different name for the "index", the problem can be solved. Of course, maybe I'm doing something wrong. Thanks in advance.

Best regards,
Vladir

Going to the examples page in Google Chrome only yields an empty page and the following error message in the console:

Refused to execute script from 'https://raw.github.com/codef0rmer/angular-dragdrop/master/src/angular-dragdrop.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 

Personally I think that the module name "jqyoui" is a complete misnomer.

Most of the angular projects have module names in the form "ui.XXX", so can I suggest changing the module to "ui.dragdrop" or similar?

Hey , great work on angular-dragdrop . I am running into a small issue using this with Packery. 90% chance that It is a stupid mistake on my side .

Here is a Demo link .
Its a bootstrap grid builder using Drag and Drop

I have copied most of the code from http://codef0rmer.github.io/angular-dragdrop/#/cart

The Dragging to add new element is working , multiple copied can be added in the playground .
But when the newly added elements are selected and their underlying modal properties are changed it is reflected in all the newly cloned elements.

To recreate the issue - >

1. Visit the demo link
2. Drag 2 or 3 Col 4 to the mac screen to append them
   3 Click on any newly added element and change its span using the toolbar at the top

Desired output should be only that cols width should change

jqyoui-droppable="{accept: 'li', onDrop: 'onDropPlayer'}"

When using ng-repeat with an order, dragdrop doesn't move the correct object. Here's what my ng-repeat looks like:
ng-repeat="item in items|orderBy:'item_name'"

You shouldn't set z-index in directive.

zIndex = $(this).css('z-index');
$(this).css('z-index', 99999);

and

$(this).css('z-index', zIndex);

It caused a bug, when set drag option {helper:'clone'}.

Use jQueryUIDraggable option zIndex

This is seen in Angular 1.2.6. The z-index of 99999 is being applied to the original element and not the draggable one when using helper:'clone' in the jqyoui-options.

A fix would be:

Index: angular-dragdrop.js
===================================================================
--- angular-dragdrop.js (revision 59036)
+++ angular-dragdrop.js (working copy)
@@ -243,22 +243,31 @@
       require: '?jqyouiDroppable',
       restrict: 'A',
       link: function(scope, element, attrs) {
-        var dragSettings, zIndex;
+        var dragSettings, dragOptions, zIndex;
         var updateDraggable = function(newValue, oldValue) {
           if (newValue) {
             dragSettings = scope.$eval(element.attr('jqyoui-draggable')) || [];
+           dragOptions = scope.$eval(element.attr('data-jqyoui-options')) || {};
             element
               .draggable({disabled: false})
               .draggable(scope.$eval(attrs.jqyouiOptions) || {})
               .draggable({
                 start: function(event, ui) {
-                  zIndex = angular.element(this).css('z-index');
-                  angular.element(this).css('z-index', 99999);
+                  var element = this;
+                  if(dragOptions.helper === 'clone' && ui.helper[0]) {
+                     element = ui.helper[0];
+                  }
+                  zIndex = angular.element(element).css('z-index');
+                  angular.element(element).css('z-index', 99999);
                   jqyoui.startXY = angular.element(this).offset();
                   ngDragDropService.callEventCallback(scope, dragSettings.onStart, event, ui);
                 },
                 stop: function(event, ui) {
-                  angular.element(this).css('z-index', zIndex);
+                  var element = this;
+                  if(dragOptions.helper === 'clone' && ui.helper[0]) {
+                     element = ui.helper[0];
+                  }
+                  angular.element(element).css('z-index', zIndex);
                   ngDragDropService.callEventCallback(scope, dragSettings.onStop, event, ui);
                 },
                 drag: function(event, ui) {

When you drag an element from a filtered/ordered collection, lib drops element using unfiltered model but index from filtered.

Please add example for latest commit ("nested binding fix"). Many nested ng-repeats in my code drives me crazy

Since angularJS 1.2.1 whit version 1.0.5 of angular-dragdrop, using cloning option doesn't work as espected anymore.

I use ng-model on my DOM elements drag and drop :

DRAG :

<div data-drag="true" data-jqyoui-options="{revert: \'invalid\', helper: \'clone\'}" ng-model="user" jqyoui-draggable>

DROP :

<div data-drop=true ng-model="dropuser" jqyoui-droppable="{onDrop:\'$$childHead.mydrop\'}">

and the model is not cloned when dropping, instead my first model (on drag element, ng-model="user") become undefined. In the version 1.04 of angular-dragdrop with angularJS 1.0.8, it used to clone it.

And also in isolate scope directive, I now need to do something like that to be able to access ondrop callback : jqyoui: {onDrop: '$$childHead.mycallback' } when I used to do { onDrop: 'mycallback'}. It seems there is a new scope created on the fly.

Feel free to ask me questions if you dont understand me :)

PS: sorry for the bad english, i am french.

Nodejitsu has been giving a 502

Edit: fixed.

I think that ng-click should not be fired when dropping an element.

Unfortunately it is.

I have a ng-hide boolean linked to a switch that is activated using the onStart callback. I can't seem to get the UI to update using this switch.

For example, i have a div like this:
<div class="black box" ng-hide="showDropzone"/>

And in the overall controller, I have:
$scope.showDropzone = false; $scope.eventStart = function(event, ui) { $scope.showDropzone = true; }

I have the onStart: of my draggable calling eventStart. It makes it to the call, but doesn't set the scope correctly. I apologize if this isn't technically an issue of the drag and drop, but rather mixing jquery and angular. However, it's a pain and I wish I could update the model in these callback methods. Please fix if possible.

Any plans to include ordering once drag and dropped ?

I think it should be pretty easily to do via jquery sort http://jqueryui.com/sortable/

As an AngularJS newbie, I must say that this is an awesome library and I was able to implement drag and drop very quickly in a prototype that I'm working on, so thank you =).

I need to make the draggable an inmutable list, but I see that after dropping an element in a new list, angular-dragdrop removes the item from the original array. As I didn't see any options for configuring this, I commented the lines #225 and #228 and it works perfectly.

I would like to make this an option and submit a pull request but I wanted to ask if you find this acceptable, or if there's a better approach.

And lastly, while reading the code I'd like to know more about the lines #226 and #232. Are they doing some kind of tricky magic pattern? (or are they errors?), because if I understand correctly, #226 is doing the same comparison twice, and #232 is testing opposites with a binary and.

Thanks.

Are the parameters in line 74 reversed?

var updateDroppable = function(oldValue, newValue) {

Shouldn't the newValue precede the oldValue for a watch listener?

Hello.

I use a similar approach like in the given example for a shopping list (https://github.com/codef0rmer/angular-dragdrop/blob/master/demo/dnd-shoppingcart.html).

But I want to be able to drag the elements back to the available Product list.

So a typical workflow:
(Step => Situation)
Initial => Item is in List A (not marked as listed by a class) and is not in List B
Drag from A to B. => Item stays in List A (marked as Listed by a class) and appears in List B
Drag from A to B. => Item stays in List A (marked as Listed by a class) and is two times in List B
Drag Item from List B to A. => Item stays in List A(marked as Listed by a class) and remains once in List B
Drag Item from List B to A. => Item stays in List A (not marked by a class) and is not in List B

How can I do this?

Thanks for your help!

jqyoui_pos does not appear to be adding correct position indexes to the model... Please take a look at your previous example with the model exposed to see the problem:

http://plnkr.co/edit/PGWUMV?p=preview

I can t see how cloning is working especially in the example (i.e. the one with the cart).
Is it not supposed to clone the elements once dropped? Unless I misunderstood what clone is meant for. Hope it will be usefull. Sorry if not,... Best regards!

I was wondering why inside mutateDraggable we are setting the dragged model to be equal to the value of the drop model value:

$parse(dragModel + ' = __dropItem')(scope);

When I drop a cloned drag item, this causes my dragged model to become 'undefined', as at that point the droppedModelValue is undefined. It makes sense to me we override droppedModelValue with draggedItem, but whats the reason for overriding draggedModel with droppedModelValue?

Surprisingly this is only an issue in angular 1.1.5, not 1.1.07. I can dig in more and produce a fiddle, unless this is by design.

I am trying to get the rows of DataTables to become draggable items, so that I can drag them to a div of my choosing.

Below is a demo if the problem.

http://plnkr.co/edit/C1kqzC9sxSd76pxxEYc0

The demo has two sections of draggables - one in a DataTable, and the other one a list generated via ng-repeat. The former does not work, while the other does.

Any thoughts? Is there a way to somehow invoke the draggable directive to register new items in the model?

Thanks in advance,
-Jeton.

I've seen some amazing interactions here: http://jqueryui.com/sortable/

Pls teach me how can I modify angular-dragdrop to do something like it.

Like issue #49 , when you use data- prefix on jqyoui-droppable and jqyoui-draggable the attributes won't be recognized. The data- prefix is helpfull to make sure the html gets through validators.

Hi codef0rmer,

I´m using Angular-dragdrop and I have another directive that have isolate scope, so when I add the new directive in this way : data-thumb-actions="Model" the Angular-dragdrop stop working. Is there a way to make the Angular-dragdrop read the model from my directive?

Hi,

I have implemented two separate directives:

1. a gallery which you can drag items from
2. a dashboard that you can drop items on

I need to perform validations on the dragged model in the dropped context, but I have no access to it as it is in the other directive.
An ugly solution is to save the "currentDrag" in a shared parent controller (using 'onStart') but it would be much nicer to obtain it, e.g. as a third argument of the 'onDrop'/'onOver'/'onOut' callbacks.

Any advice?

Thanks

I've noticed a problem when mixing the dragdrop module with an ngRepeat that has a filter applied...

The $index is simply the index of the item in the displayed array, not the index in the source array. For this reason, using an index is impractical; if you filter the objects the indexes no longer correspond to the source array. So it might be safer to use the object itself somehow?

First off, nice work! Secondly, as I may well end up using this in a production project, it would be nice if the code was versioned and tagged.

try to to drag some object and use scrolling in parallel - it will cause a bug

Angular allows you to set the model via ng-model or data-ng-model, but angular-dragdrop explicitly checks for the ng-model attribute.

The simplest solution would be to check for both (I don't mind submitting a PR with this change if you deem it adequate.)

The "right" thing to do seems to be to requrie ngModel in the directive's requirements, as done in https://github.com/angular-ui/bootstrap/blob/master/src/datepicker/datepicker.js#L134 . However, this might require more significant code changes.

some times the directives run before to charge the dom.
This makes the following error.

"Error: element.draggable is not a function
jqyoui</<.link/</</</updateDraggable@http://localhost:9000/libs-js-thirdparty/angular-dragdrop/src/angular-dragdrop.js

I am try to put in the directive but this dont function.

$timeout(function(){})

and

angular.element(document).ready(function(){})

Browser: firefox 28.xxx

Can you add a license file to this code, so we know if we can use it or not? Thanks!

I'm trying to use your module with a callbackfunction in my controller that uses the "controller as" syntax.

After some hours of debuggin and finally understanding the concept of scope inheritance the first problem I can point out would be in your callEventCallback.
There are probably other problems as well but I'll start there:

The last line won't work any more:

// as callbackname is something like "controllerName.callbackFunctionName"
// scope[callbackName] will return undefined

scope[callbackName].apply(scope, args);
// this will break 

This would work:

var callbackScopeName = callbackName.split(".")[0];
var callbackFunction = callbackName.split(".")[1];
scope[callbackScopeName][callbackFunction].apply(scope, args);

Sincerly yours,
D

With the updates, I'd love to be able to pull them with Bower for a project I'm working on, but Bower's current incarnation still complains about pulling tagged commits - would it be possible to update the tag?

If you put something in the cart, and then drag it back, the item will occur in the list of available items twice. It would be useful to see how to make a "trash can" with angular-dragdrop. Thanks for your patience.

Hey,

I am looking for a way to have drag and drop with sorting capability.
Is this possible with this library?
I did try, but when i drop, it gets dropped at the end of the list.
Any help would be appreciated.

Cheers,
Tom

I'd like to apply a custom helper function to my draggable elements (to help support dragging multiple selections a la http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items), but I can't seem to specify a controller function as the helper property.

Here's my markup:

<div data-ng-repeat="datastream in availableDatastreams" data-drag="true" data-ng-model="availableDatastreams" id="availableDatastream-{{datastream.id}}" jqyoui-draggable="{animate: true, index: {{datastream.id}}, onStart: 'draggingDatastream'}" jqyoui-options="{revert: 'invalid', helper: 'getSelectedDatastreams', placeholder: 'keep'}">
   <input type="checkbox" class="availableDatastreamSelector" id="availableDatastreamSelector-{{datastream.id}}" /> {{datastream.title}}
</div>

getSelectedDatastreams is a function on my directive's controller:

$scope.getSelectedDatastreams = function (e, item) {

But that function never gets called. I've tried specifying the helper property as getSelectedDatastreams(). Is there a way to wire this up?

During development i ran against this issue. The lib calls the DOM elements, but instead it should call jQuery with the element to call other jQuery functions (like draggable).

Please fix this issue, or do it manually by replacing the element.draggable to $(element).draggable in the directive's (replaced 4 in total).

I tried to checkout the demo. Console throws errors.

After drag and drop an element, the onStop callback are fired but the ng-model has not been updated yet.

<div colspan="2" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="customFields" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true, onStop: 'stopCallback'}">

on the stopCallback function, the customFields array is on the same position that it had before have been dragged.

Hi, i want to add un button "remove" in front of an element. How can i remove this element ? Thanks

I have three draggables, A, B and C and four droppables 1, 2, 3, and 4.

Is there a method of specifying that A can be dropped on any droppable, B can only be dropped on 3 and C can be dropped on 3 or 4?

Or equivalently that 1 and 2 can accept A, 3 can accept A, B or C and 4 can accept only A or C.

Is there any logical difference in which side filtering works?

invokeDrop is only called when the following is true:

if (angular.isDefined(angular.element(ui.draggable).attr('ng-model')) && angular.isDefined(angular.element(this).attr('ng-model'))) {

This should not be required for onDrop to fire, or at the very least, this behavior should be documented.

Perhaps I understand how this module works incorrectly or may have the wrong idea, but I would like the ability to pass in information to the callback that fires.

For example, take a look at this snippet:

<ul>
    <li ng-repeat ng-model="list1" data-drag="true" jqyoui-draggable="{onDrag:'dragCallback(itemIndex)'}" data-jqyoui-options ng-repeat="(itemIndex, item) in items">{{item.title}}</li>
</ul>

I would like the ability to pass in the index of a repeated element to the callback in order to execute some logic based on the particular element.

I have code

<div data-drop="true" jqyoui-droppable="{onDrop:moveItem()}></div>

$scope.moveItem = function(){
    console.log('Dropped');
}

And behaviour is same like I use onOver instead onDrop

Mobile touch and drag events do not trigger the dragging behaviour of draggable objects.

Hi,

Firstly thank you for writing this drag drop directive. I have two columns, one is draggable, the other droppable. The droppable column is also sortable using jQuery UI but when trying to sort, a droppable event is triggered and this droppable event expects a dragged item but we weren't dragging we were sorting and so "dragModel" is undefined which causes an error and then sorting never happens.

Adding:

   if (!dragModel) return;

to line 64 seems to fix the problem.

Thanks