Drag works only for first time on mobile (touch) device

[chicko01]

On mobile (or touch) device dragging works only for first time. Then you cannot grab (start dragging). Issue is reproducible for example on https://amendx.github.io/vue-dndrop/examples/drag-handle.html.

Problem is caused by removing (and not adding back) 'touchstart' event after finishing first drag (mouseUp function).

https://github.com/amendx/vue-dndrop/blob/master/src/utils/container/mediator.js#L405 -> https://github.com/amendx/vue-dndrop/blob/master/src/utils/container/mediator.js#L38

[marina31714]

I have the same issue and tablet, have you solved it? Is there any new information?

[krisdarryn-mrm]

Hi, Is there any update on this issue? Thank you.

[EmanuelCostaa]

I have the same issue. Is there any new information? Maybe https://www.uriports.com/blog/easy-fix-for-intervention-ignored-attempt-to-cancel-a-touchmove-event-with-cancelable-false/ can have the solution.

[krisdarryn-mrm]

I have the same issue. Is there any new information? Maybe https://www.uriports.com/blog/easy-fix-for-intervention-ignored-attempt-to-cancel-a-touchmove-event-with-cancelable-false/ can have the solution.

This one is promising, thank you for sharing.

[LucasRosas]

Same issue here. Is there any new information?

1. The function removeGrabListeners () is really necessary?

2. here in my computer I got this error:

3. I think the html scroll has to be disabled so as not to be confused with the drag action.

[LucasRosas]

I found a solution!! Not the most elegant, but it worked. 😄

• I replaced the render functions with setup and had to import { h } from 'vue':

Notice that I passed the wrapChild function inside setup(). And since setup takes prop and contect as parameters, I also changed this.$slots.default to context.slots.default().

-(I don't know if it's necessary) I added $context.$emits in the props variable of mapOptions

✅ Ckeck At that point the problem with the touch on the second element had been fixed! But the components stopped emitting events.

• I renamed eventEmitterMap keys

• Added if(event.cancelable) condition to event.preventDefault() in onMouseMove(event)

Warning At that point it was only possible to move the Draggable horizontally. Here starts the ugly part:

• In the Container, in addition to listening to the events, I needed to set their functions via prop:

• Finally, I created a function that interrupts the scroll and checks if the clientY of the mousemove and touchmove is a value close to the edges to move the scroll via window.scrollBy(0, +-100) in onDragStart and reverts this status in onDrop.

I hope this solution helps to write a prettier solution.

[LucasRosas]

Many thanks, @novikov-dv , who managed to solve the problem : https://github.com/novikov-dv/vue3-dndrop/blob/master/dist/vue3-dndrop.esm.js

[CedroVost]

Hi, we're having the same issue on an older vue2 project, any update on when it'll be patched?

Thanks!

[Hlautameki]

I don't get it. The simple (no tags) sample works on the official page on the touch devices. But if I implement it completely the same way locally it doesn't. After one drag it stops working.

[LucasRosas]

import { Container, Draggable } from https://github.com/novikov-dv/vue3-dndrop/blob/master/dist/vue3-dndrop.esm.js if you use vue3. It worked for me, @Hlautameki.

[Hlautameki]

@LucasRosas Amazing. It works. Thank you very much. You've saved me a lot of time. Especially since this library was my last hope for available drag-and-drop solutions for Vue :)