dragdrop doesn't play nicely with jQuery UI's sortable about angular-dragdrop HOT 32 CLOSED

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

from angular-dragdrop.

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].

from angular-dragdrop.

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

from angular-dragdrop.

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.

from angular-dragdrop.

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 [email protected]:

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
*

from angular-dragdrop.

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

from angular-dragdrop.

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

from angular-dragdrop.

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

from angular-dragdrop.

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.

from angular-dragdrop.

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

from angular-dragdrop.

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!

from angular-dragdrop.

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

from angular-dragdrop.

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

from angular-dragdrop.

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

from angular-dragdrop.

@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".

from angular-dragdrop.

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 [email protected]:

@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
*

from angular-dragdrop.

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.

from angular-dragdrop.

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

On Mon, Oct 21, 2013 at 10:38 PM, icemancml [email protected]:

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
*

from angular-dragdrop.

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

from angular-dragdrop.

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 [email protected]:

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
*

from angular-dragdrop.

@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.

from angular-dragdrop.

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?

from angular-dragdrop.

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

from angular-dragdrop.

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

from angular-dragdrop.

+1

from angular-dragdrop.

Same here. Any updates?

from angular-dragdrop.

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

from angular-dragdrop.

Also interested in seeing this issue resolved.

from angular-dragdrop.

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

from angular-dragdrop.

@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?

from angular-dragdrop.

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

from angular-dragdrop.

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!

from angular-dragdrop.