dragdrop doesn't play nicely with jQuery UI's sortable

[raleighvon]

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

[codef0rmer]

Can I see small demo of what you are trying to do?

[esjewett]

Happening to me as well. Not clear why it's not working as I don't use jQueryUI's sortable at the moment, and in my case is dying at line 173 of angular-dragdrop.js.

I'm using jqyoui-draggable and jqyoui-droppable on the same elements and I'm not using an ng-model on these elements.

Console shows:

Error: Syntax Error: Token '=' implies assignment but [undefined ] can not be assigned to at column 11 of the expression [undefined = __dropItem] starting at [= __dropItem].

[codef0rmer]

ngModel on draggable/droppable is mandatory to make swapping happen.

[esjewett]

Ok. I didn't want swapping or model-integration, so I wasn't using it. The idea was to just create a link between two elements by dragging on top of another. Ended up just defining my own very simple directives based on jQueryUI's draggable and droppable.

[codef0rmer]

Oh, now I got it. I'll consider this scenario to be fixed soon.

On Thu, Aug 15, 2013 at 10:39 PM, Ethan Jewett notifications@github.comwrote:

Ok. I didn't want swapping or model-integration, so I wasn't using it. The
idea was to just create a link between two elements by dragging on top of
another. Ended up just defining my own very simple directives based on
jQueryUI's draggable and droppable.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/37#issuecomment-22714403
.

With Regards
Amit Gharat
http://amitgharat.wordpress.com/
*
The luckiest person is one whose passion and profession are the same.

*

Q: Why is this email five sentences or less?
A: http://five.sentenc.es
*

[slreynol]

Hey codef0rmer,

How can you get a list where the elements can be dragged out of the list and sortable within the list? I have tried to add the ui-sortable to a div that accepts the droppable but it is not working to sort.

<div class="container form-inline" style="text-align: center; overflow-x: scroll" ng-model='list5' jqyoui-droppable="{multiple:true}" ui-sortable>

            <div class="btn btn-info btn-draggable"  ng-repeat="item in list5" data-drag="{{item.drag}}" data-jqyoui-options="{appendTo: 'body',containment: 'window',scroll: false,helper: 'clone',revert: 'invalid'}" ng-model="list5" jqyoui-draggable="{index: {{$index}},animate:true}" ng-hide="!item.title">{{item.title}}</div>

        </div>

However without the drag and drop code the ui-sortable code works fine

 <div class="container form-inline" style="text-align: center; overflow-x: scroll" ng-model='list5' ui-sortable>

            <div class="btn btn-info btn-draggable"  ng-repeat="item in list5"  ng-hide="!item.title">{{item.title}}</div>

        </div>

Please let me know if there are some options that I am missing, or if these two don't play nicely together

[codef0rmer]

I'm not sure both will work together but why you want to use both?

[slreynol]

I am looking to be able to exchange items between two lists, and be able to sort the order in in at least one of the lists. Please let me know if you know of a way to get these to work together as currently the ui-sortable does not work with it.

Thanks

[codef0rmer]

Fine. You create two lists with some items and let items drag from list1 to list2 (check out http://codef0rmer.github.io/angular-dragdrop/#/list) and i assume that after each item is dropped, you want to sort all items from list1 by name or something (try this http://codef0rmer.github.io/angular-dragdrop/#/filter). You need to combine above 2 demos into one. Try and let me know in case of any issue.

[slreynol]

I am not looking to sort by name or filter to sort on a variable, the order needs to be completely adjustable as dragged to specify the order, as the final product is not a list of names but of forms of varying sizes.

Thanks

[codef0rmer]

What problem you face when you combine both ui-sortable and angular-dragdrop? I would like to fix the issue from my end? A small working demo would be very helpful to gain some insight. Thanks!

[slreynol]

Here is a Plunker of what I am dealing with, I attempted to get ui-sortable to work on the second div but with no success

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

[unnamedyoyo]

Hi,
I have the same issue, is there a fix to this problem? @codef0rmer @slreynol
Thanks

[codef0rmer]

@unnamedyoyo can you share a demo as @slreynol demo does not help me understand the problem?

[unnamedyoyo]

@codef0rmer We can see that ui-sortable is not working with angular-dragdrop, we can't sort the list on the right:
http://jsfiddle.net/unnamedyoyo/ey87K/

If we remove all the angular-dragdrop attributes ("data-drag", "data-jqyoui-options", "ng-model" and "jqyoui-draggable"), ui-sortable is working, but not angular-dragdrop (obviously):
http://jsfiddle.net/unnamedyoyo/ey87K/1/

If we only remove the "data-drag" attribute, everything is working, but the animation become weird, if we drop the items on this list on the left:
http://jsfiddle.net/unnamedyoyo/ey87K/2/

The animation problem can be overcome with "animate:false", but that doesn't really solve the problem. And, I don't know the consequences if I remove "data-drag".

[codef0rmer]

I wish to have them work together well but may be the events are
overwritten and hence ui-sortable does not work. I'll have to come up with
some solution soon. Meanwhile If you have separate handler for sortable and
draggable then it works (you need to tweak the code to make it look like
you are actually dragging the entire li than a handler)

http://jsfiddle.net/codef0rmer/ey87K/4/

On Mon, Oct 21, 2013 at 4:56 PM, unnamedyoyo notifications@github.comwrote:

@codef0rmer https://github.com/codef0rmer We can see that ui-sortable
is not working with angular-dragdrop, we can't sort the list on the right:
http://jsfiddle.net/unnamedyoyo/ey87K/

If we remove all the angular-dragdrop attributes ("data-drag",
"data-jqyoui-options", "ng-model" and "jqyoui-draggable"), ui-sortable is
working, but not angular-dragdrop (obviously):
http://jsfiddle.net/unnamedyoyo/ey87K/1/

If we only remove the "data-drag" attribute, everything is working, but
the animation become weird:
http://jsfiddle.net/unnamedyoyo/ey87K/2/

The animation problem can be overcome with "animate:false", but that
doesn't really solve the problem. And, I don't know the consequences if I
remove "data-drag".

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/37#issuecomment-26709382
.

With Regards
Amit Gharat
http://amitgharat.wordpress.com/
*
The luckiest person is one whose passion and profession are the same.

*

Q: Why is this email five sentences or less?
A: http://five.sentenc.es
*

[icemancml]

FYI I added two buttons to enable/disable this two behaviors. A good solutions will be use a native angular d&d. I did it and worked.

[codef0rmer]

Glad to know. BTW, which native DND have you used? angular-dragondrop?

On Mon, Oct 21, 2013 at 10:38 PM, icemancml notifications@github.comwrote:

FYI I added two buttons to enable/disable this two behaviors. A good
solutions will be use a native angular d&d. I did it and worked.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/37#issuecomment-26736168
.

With Regards
Amit Gharat
http://amitgharat.wordpress.com/
*
The luckiest person is one whose passion and profession are the same.

*

Q: Why is this email five sentences or less?
A: http://five.sentenc.es
*

[icemancml]

http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html. It´s very simple but usefull.

[codef0rmer]

Interesting I'll try to incorporate this approach in my plugin and allow
jqueryUI as a fallback. Thanks!

On Mon, Oct 21, 2013 at 10:59 PM, icemancml notifications@github.comwrote:

http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html.
It´s very simple but usefull.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/37#issuecomment-26737923
.

With Regards
Amit Gharat
http://amitgharat.wordpress.com/
*
The luckiest person is one whose passion and profession are the same.

*

Q: Why is this email five sentences or less?
A: http://five.sentenc.es
*

[unnamedyoyo]

@codef0rmer Thank you for your help, but I need to have the same handler for sortable and draggable.

So for now, I'll probably won't use ui-sortable and try to sort/drag/drop with the solution which will work first, in that order:

• angular-dragdrop
• @icemancml solution, native drag and drop.
• JqueryUI

Thank you both.

[slreynol]

Is there any update, on this issue? I would still like to use ui-sortable and be able to drag an object to a separate list and have them work together. Does anyone have a working demo of this?

[codef0rmer]

No development yet on this but I'll spend some time next week to give it some thought. Stay Tuned!

[TheBoef]

Is there an update on this issue? Im also intrested in using this drag and drop with ui-sortable.

[xaralis]

+1

[patrickw14]

Same here. Any updates?

[codef0rmer]

Sorry for waiting you guys, little busy these days. I hope to fix it soon.

[FabianMeul]

Also interested in seeing this issue resolved.

[orszaczky]

Hello, any news regarding this?
Or any suggestions how to set up draggable, droppable & sortable in Angular?

[codef0rmer]

@orszaczky: Nope, sorry but I'm quite busy with my book and could not get time to spend on it. Would you like to give it a try?

[fkotsian]

Hey everyone,

If you don't need any of the jqyoui-draggable options, you can sort items between two lists and their corresponding ng-models by tweaking some of the settings:

• Add ui-sortable to the containing element (as in fiddle http://jsfiddle.net/codef0rmer/ey87K/4/ above)
• Add connectWith option to the ui-sortable element, referencing the elements you want to sort between (e.g. ui-sortable="{connectWith: '.caption'}")
• Remove jqyoui-draggable from your draggable element

I imagine this removes the draggable callbacks that were conflicting with the sortable callbacks. Works alright for me - will see if I run into any problems down the line

[seaBubble]

Hi everyone,

I also have this problem. It has been quite a while since the last comment here...is there a fix or a workaround anyone could share?

Thanks!