Is the react-draggable not support on mobile platform?

Viewed 975

My code is here.

The p-in-p button of the MediaPlayer triggers the MiniPlayer component.

And the react-draggable package is used in MiniPlayer component.

The top-left button works on the computer; however, it does not work in the mobile device.

When I remove the <Draggable> tag from the MiniPlayer.js, the top-left button works on mobile again.

How can I fix the problem?

1 Answers

react-draggable works on mobiles. It seems onClick or onChange inside <Draggable> are disabled on mobiles (or on touch devices in general).

To make elements inside the drag component clickable, set as cancel the selector of those elements.

<Draggable cancel=".btn">
  <div>
  ...
  <button className="btn">click</button>
</div>

</Draggable>```
Related