Not possible to listen to click events inside a Draggable on Mobile

[ChristophP]

Hi,

we are using react-draggable and have a link inside a draggable which should be clickable.

 <Draggable
        axis="x"
        >
        <Link>I should be clickable</Link>
  </Draggable>

On a non-touch device this works fine as the click event fires normally. However, on touch devices the click event is not fired at all, which is unfortunate.
The line of code responsible for this, seems to be this one:

react-draggable/lib/DraggableCore.js

Line 295 in 44a8c6e

if (e.type === 'touchstart') e.preventDefault();

touchstart event are cancelled there, resulting in the click never firing.

Since this line seems to be in place to prevent scrolling on touch devices, would a possible solution be to cancel touchmove instead?

Another solution may be to cancel the touchstart event higher up

[darya425]

I have the same problem.

[Jeff-Bee]

I have the same problem too.

[darya425]

@quolpr Hi, can you help us?

[relense]

This solution might help with this problem [JeanNicolasdeLamballerie](#666 (comment)) I tried it and I got the links to work on mobile

[NadirBakhsh]

I have the same problem too.

But now it working for me

add cancel props in the Draggable component like cancel={'.need-interaction'}

Nav Component

add that className to each Link component

[ChristophP]

@NadirBakhsh oh that seems like a nice solution. Will need to try.

[ChristophP]

The .cancel property works for me. Thanks.

[tnrich]

@STRML could we at the very least get a way to disable the line that is causing this issue:

    // Prevent scrolling on mobile devices, like ipad/iphone.
    // Important that this is after handle/cancel.
    if (e.type === 'touchstart') e.preventDefault();

for my use case I don't need to prevent scrolling on a mobile device but DO need clicks to work inside the draggable component!

Thanks!

[STRML]

I'm happy to review a PR on this.

[tnrich]

@STRML PR here - #760

Thanks!