vue-draggable-nested-tree icon indicating copy to clipboard operation
vue-draggable-nested-tree copied to clipboard

Can you support touch events for dragging and dropping ?

Open shaydoc opened this issue 6 years ago • 14 comments

Hey, can the draggable tree support touch for drag and drop?

shaydoc avatar Jun 07 '18 23:06 shaydoc

ok, i will try that today

phphe avatar Jun 08 '18 06:06 phphe

great thanks, it should be a matter of adding the touch event listeners to your draggablehelper ?

shaydoc avatar Jun 08 '18 15:06 shaydoc

@shaydoc yes. i tried, branch dev-mobile: https://github.com/phphe/vue-draggable-nested-tree/tree/dev-mobile. There is an issue, the page will move when drag

phphe avatar Jun 11 '18 14:06 phphe

@phphe did you have any joy looking at making the control touch enabled ?

shaydoc avatar Jun 12 '18 15:06 shaydoc

@shaydoc yes. So I created the branch dev-mobile. There are some bugs.

phphe avatar Jun 13 '18 14:06 phphe

Cool

shaydoc avatar Jun 14 '18 06:06 shaydoc

I did some touch stuff yesterday, jquery.nestable handles it well

https://github.com/RamonSmit/Nestable2/blob/master/jquery.nestable.js

shaydoc avatar Jun 14 '18 06:06 shaydoc

@shaydoc I merged mobile in latest version. There is an issue: page scrolling on drag. I don't have any idea now.

phphe avatar Jul 29 '18 09:07 phphe

@phphe I found that using mouse/touch position solves this rather nicely, any thoughts?

`function resolveDragedElAndInitialPosition(e) { var el0 = opt.getEl ? opt.getEl(dragHandlerEl, opt) : dragHandlerEl; var el = el0;

if (opt.clone) { store.triggerEl = el0; el = el0.cloneNode(true); el0.parentElement.appendChild(el); }

var pos = offsetToPosition(el, getOffset(el0)); pos.y = e.pageY; return { position: pos, el: el }; }`

shaydoc avatar Aug 06 '18 09:08 shaydoc

@shaydoc try latest 2.1.3

phphe avatar Aug 10 '18 12:08 phphe

@phphe There is still an issue on mobile when page has scroll. Not always. But drag is happening only when we carefully drag the item. I am using version 2.2.17. Any workarounds?

Thank you for this nice library btw.

ram33 avatar May 07 '19 12:05 ram33

@phphe Seem to work fine, if we do preventDefault on item/handle's touchstart & touchmove events. I have currently done it on item slot which works for me. But I can raise a pull-request by adding those in code. Please let me know.

ram33 avatar May 08 '19 09:05 ram33

@ram33 awesome. please raise it, i will check that.

phphe avatar May 09 '19 14:05 phphe

@phphe please check https://github.com/phphe/vue-draggable-nested-tree/pull/71

ram33 avatar May 11 '19 08:05 ram33