Making dnd-kit Drag Work on Touch Screens Without Blocking Page Scroll
A DEV Community tutorial explains why dnd-kit drag-and-drop often breaks on phones, where the page either scrolls while the item stays put or the item captures every swipe. The default PointerSensor cannot reliably prevent scrolling, so the guide recommends pairing a pointer sensor that ignores touch with a TouchSensor using a short activation delay and small movement tolerance, plus a KeyboardSensor. It advises applying touch-action: none only to drag handles and keeping drags inside their own scroll container, since iOS Safari resizes the window and can cancel drags. The author also argues that keyboard-only drag falls short of WCAG 2.5.7, so a tap alternative such as a move menu or up and down buttons should be added. The guidance targets @dnd-kit/core 6.3.1 and @dnd-kit/sortable 10.0.0.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.


Discussion (0)
Log in to join the discussion and vote.
Log in