JsTree drag and drop on android / ipad tablets

I use jsTree to drag items between multiple tree structures. This works great on PCs, but not on tablets (both Apple and Android). I know that JQueryUI does not have built-in DnD support for tablets, and I tried several available tweaks, but none of them worked.

Can i use drag 'n drop in jsTree on tablets?

Thanks!

+4
source share
1 answer

I have been studying this problem for several days, focusing on getting an existing web application that uses jsTree to work on the iPad. Using jquery.ui.touch.js, I can get most of this way. Touch events can be mapped to mouse events expected by jstree and the tree will allow me to drag, but the transition target is never recognized, and in fact the drop_check function is never called. So this is not entirely true.

I think this could be because only some of the touch events can be mapped to mouse events such as jquery.ui.touch.js: touchstart = mousedown, touchmove = mousemove, touchhend = mouseup. However, jstree also depends on mouseenter and mouseleave to check the target, and I have no event for them. touchhenave and touchleave were discussed, but I don't think the Safari browser on the iPad launches them at this point. I was thinking of trying to generate mouseenter and mouseleave events from the touchmove event, looking at the coordinates and checking for overlap, but I haven't tried it yet.


UPDATE: May 18, 2012. I think it works now. Several things are different than I thought. The big breakthrough came when I realized that the goal element of a touch event never changes from touchstart, through all touches, to touch. However, the mousemove event expected the element that receives the event to be the element you are moving. So I changed the plugin to send the mousemove event to the element in coordinates in the touchmove event, and it worked like a champion. It also turned out that as soon as I did this, I no longer needed to manually trigger the mouseenter and mouseleave events, because jQuery took care of that.

The right-click context menu (when touched) worked in my application as a simple tester, but not in our web application, until I added a mouse on the right button after the context menu event to the simulated event.

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

+2
source

Source: https://habr.com/ru/post/1398623/


All Articles