Drag and Drop directive (not in list)

Hello !

I need to implement a directive in ionic :

This directive have to allow the user to drag and drop some elements in a div or remove them.
I used to do that with jQuery UI but because jQuery is not recommended with angular, i am looking for a compatible way with ionic and mobile gestures.

(Future app is for Ipad only)

Thanks for help.
Maxime.

1 Like

Now really much of an issue with ionic…
You should check this post out

or this
http://www.directiv.es/Angular-DragDrop

1 Like

I implemented a drag and drop with jQuery UI and JQueryUI Touch Punch.

But i need to write some extensions to simulate a ‘delay’ when dragging starts and then prevent the default scroll behave.
It is not the best solution, but i needed drag, drop with combination of sortable lists.

On slow, old devices it is a little bit laggy.

Greets, bengtler

This doesn’t work with ios, but works on chrome during development

I didn’t try with android, I continue testing …

@rdb any success on this?

No success on real device…

but I think it is realizable

it is not working in mobile devices and even on emulator, but perfectly working on desktop.

i want to know is it possible to achieve the drag and drop in ionic framework.

It is possible, but it will require some work

You could work from the tinder card example.

Or try this module out, which supports touch events

Be sure to include data-tap-disabled=“true” on the element you want to drag

1 Like

hey @mhartington i tried out the ngDraggable module it is working fine in browser. but in emulator it is not working. i even placed the data-tap-disabled=“true” but no outcome.

hey finally i got it worked with ngDraggable. Thanks :smile:

1 Like

post me sample example of drag and drop @kishorekik

hello @chaith123 i used the code from ngDraggable Module Demo.
http://htmlpreview.github.io/?https://github.com/fatlinesofcode/ngDraggable/blob/master/example.html

once you download it from git https://github.com/fatlinesofcode/ngDraggable, demos code can be available to you. i just used the same code. that’s it

thanks for @kishorekik
In browser it is working not in emulator in which area to place data-tap-disabled=“true” below is my example link

which area to place data-tap-disabled=“true” help me

its working in emulator also

1 Like

I have had a lot of success with ngDraggable. Here is a code pen of a basic implementation.

http://s.codepen.io/jfspencer/debug/jEPGGm?

its working drag and drop. issue is drag particular one element showing behind the box. drag the element shows like this

help me guys
thanks in advance
chaith123

I realize this was a while back, but I can’t seem to get the ngDraggable to work for the life of me. I’ve put the data-tap-disabled="true" on the elements I want to drag and the area in which I want the areas to be re-ordered in (yes I need the reorder part) but to no avail.

Please help me out!