Question

I’m using jsTree to drag and drop items between several treeviews. This works fine on PCs, but not on tablets (both Apple and Android). I know JQueryUI does not have built-in DnD support for tablets and I’ve tried several of the tweaks available, but none of them worked.

Is it possible to use drag ‘n drop in jsTree on tablets?

Thanks!

Answer 1

I’ve been exploring this very issue for several days now, focusing on getting an existing web application that uses jsTree to work on an iPad. Using jquery.ui.touch.js I can get most of the way there. The touch events can be mapped to the mouse events that jstree is expecting, and the tree will allow me to drag, but the drop target is never recognized, and in fact the drop_check function is never called. So it’s not quite there.

I think this may be because only some of the touch events can be mapped to mouse events like jquery.ui.touch.js does: touchstart=mousedown, touchmove=mousemove, touchend=mouseup. However, jstree also depends on mouseenter and mouseleave for drop target checking, and I don’t have an event for those. touchenter and touchleave have been discussed, but I don’t think the Safari browser on the iPad fires those at this point. I’ve been thinking about trying to generate the mouseenter and mouseleave events from the touchmove event by looking at the coordinates and checking for overlap, but I haven’t tried that yet.

---

UPDATE: 18 May 2012. I think it’s working now. A couple of things are different than I thought. The big breakthrough was when I realized that the touch event target element never changes from touchstart, through all the touchmoves, to touchend. The mousemove event, however, was expecting that the element that gets the event is the element you’re moving over. So I changed the plugin to dispatch the mousemove event to the element at the coordinates in the touchmove event, and it worked like a champ. It also turned out that once I did that I didn’t need to manually trigger the mouseenter and mouseleave events any more because jQuery took care of those.

The right click context menu (on touch-hold) worked in my simple tester app but not in our web application until I added in a simulated mouseup event on the right button after the context menu event.

My modified version of jquery.ui.touch.js has been uploaded here:
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/issues/detail?id=18