6

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?

Werthis
  • 557
  • 3
  • 15
Don Kirkby
  • 53,582
  • 27
  • 205
  • 286

1 Answers1

4

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.

Don Kirkby
  • 53,582
  • 27
  • 205
  • 286
  • 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? – Werthis Aug 09 '23 at 13:57