'Touch users can't drag and drop in React app
I followed the quick start for the dnd kit React library, and it lets me drag and drop just fine with a mouse. However, when I try to use the same page with Chrome on Android, I can't drag the item. It looks like it starts moving and then gets stuck as soon as my finger moves outside its original border.
I tried switching to the drag overlay, but that didn't seem to make any difference.
How can I support touch users with dnd kit?
Solution 1:[1]
It wasn't covered in the quick start, but I found the answer in the Draggable section's recommendations:
In general, we recommend you set the
touch-actionproperty tononefor draggable elements in order to prevent scrolling on mobile devices.
I found that I could either set the CSS style on the draggable element itself, or on a parent element that contains several draggable elements.
However, when I started trying to drag items around within a list or grid of items, that stopped working. Eventually, I had to switch from using the pointer sensor to using the mouse and touch sensors, as described in the sensors section.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |