Two issues with Drag & Drop in Ionic (+ Angular)

I’m building an app that needs to feature Drag & Drop as an interaction mode. Specifically, imagine an Ionic Side Menu, containing an <ion-list> of people. Any one of these people in the list should be able to be dragged and dropped into a container, somewhere in the view (but not dropped back into the <ion-list>. Now, a problem and a question:

Problem: I implemented an Angular Drag & Drop library ( It seems to work - inasmuch as a ghost image is draggable. But, a TypeError: e.gesture is undefined is thrown, in ionic.bundle, line 6917. Why is this error being thrown, as soon as I click a person in the list and start dragging? More importantly, how to correct this?

Question: This may be more of an Angular than Ionic question, but here goes: The <ion-list> containing the people list is under the control of one Controller (say, ControllerA), while the container into which a person from this list is to be dropped is under the control of another Controller (say, ControllerB). Now, is it actually possible to have the Drag part of Drag & Drop reside in one Controller, and the Drop part of Drag & Drop reside in another? It’s not working for me, and I don’t know if it’s because of the undefined gesture or - even if gesture were defined and not in error - it’s because the same Controller is not handling both Drag and Drop. (Both the container and the list have the required Directives present in the template, and functions to handle the Drop are defined.) If the Drag & Drop can be split across two different Controllers, then presumably you’d need to either use $broadcast/$on or a shared Service to handle the interaction between them, right? Can anyone clarify this?

Anyway, first things first: How to solve the TypeError: e.gesture is undefined error being thrown at the start of a Drag operation. All help much appreciated - thank you!


I can’t answer your question, but I as to your problem I have had a lot of success with ngDraggable(if you care to look at another solution). within ngDraggable there is a clone option where you can have the item your dragging cloned into a different context. I haven’t tried between controllers, but the clone is taken care of in the directive so I don’t think there would be an issue.

Here is a code pen if you want to see how things wire up. It is really messy and dumped into a single controller. If you have questions let me know.

There are a couple things that I have added namely ng-force-touch, ng-touch-delay, ng-on-hover, ng-hover-id. my branch of the project is here , base project here
I have submitted a pull request, so hopefully my changes will get merged at some point.

ngDraggable has been the only angular directive that has worked well in Ionic for me.