Touch users can't drag and drop in React app

Question

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?

Gabriel

Answer 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-action property to none for 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.

Gabriel

Yes, it worked for me too, but when I drag the list a lot, move elements up and down, sometimes it bugs. The element gets isDragging mode, but I does not move and when I scroll the page the element starts to move too with the page. I was trying to detect why that happens. Have you experienced same problem? – Elmoelmore

setting the 'touch-action' property to 'manipulation' has workde for me. – Wassyngton