Drag and Drop in Ionic

I need to implement some drag and drop functionality. There seems to be awesome gesture support in Ionic but I cant find any clear example of how to implement this functionality ? Is there any Ionic API call I can use to achieve this?

Drag and drop on touch device in a hybrid app is very difficult.
I used jquery ui sortable + drag + drop in a project.
So you need to load JQuery first (before ionic).

But you have to made some tricks to get scrolling working.

I wrote an own directive for that, which handles touch events.
Like triggering dragging only after you are touching on the element for 300ms, because the native jQuery UI options like “delay” does not work on mobile devices.

It was a mess but now it is okay.
I added also a “merge” support for sortable -> like dropping element over another with a tolerance -> merge them.
This you can find here:
http://www.flyacts.com/blog/tutorial-jquery-ui-sortable-elemente-zusammenfuehren/
it is in german, but i think google translate will to the rest for you :wink:

If i could, i would try to avoid drag and drop in those apps.

i tried also some other drag and drop directives, but there are many features missing.
So i decided to use jquery ui approach (without any extension like jquery-ui-touch-punch).

Greets, bengtler

Thanks for the detailed information. I will check out your post and let you know how I get on. Ive tried the angular drag and drop libraries, however they seem to mandate a “dataTransfer” transfer property to exist on the JS event fired - but for me its always undefined. I will investigate your solution.

@colm

I have been working through the general drag and drop issues as well. I have had a lot of success with ngDraggable. It doesn’t have any dependency on jQuery and has been straight forward to extend. It also plays perfectly with the ionic gestures. In my code pen below I am using ionic and ngDraggable events concurrently.

Here is a code pen if you want to see an example of how it’s used here

I needed a couple things that were not built in yet, namely ng-force-touch, ng-touch-delay, ng-on-hover and ng-hover-id. my branch of the project is here base project is here

Thanks for your feedback. I decided to use https://greensock.com/gsap Draggable component… It works really well on Android and IOS. I dont have any code in a public repo, but I was able to build an interactive drag drop UI for an application I was building…