How to implement drag preview for mobile touch in React DND v9

Backend
1

I’m working with React DND after the recent updates from version 7 to 9. The touch functionality got integrated directly into the main package which is great. However I’m having trouble getting drag previews to work properly on mobile devices and tablets.

I tried using DragPreviewImage component but it doesn’t seem to work when users are dragging with their fingers on touch screens. It works fine with mouse on desktop though.

Here’s my current setup:

<DndProvider
  backend={isMobile ? TouchBackend : HTML5Backend}
  options={{ enableMouseEvents: true, preview: true }}
>
  {/* my draggable components */}
</DndProvider>

Has anyone figured out how to make drag previews appear correctly for touch interactions? Any help would be appreciated.

2

interesting issue! are you testing on real devices or just using browser dev tools? touch simulation doesn’t always act like actual fingers. what happens if you set preview: false and handle it yourself? maybe the default touch feedback is messing with your custom previews?

3

same thing happened 2 me last month! the touch backend dont support DragPreviewImage outta the box. you’ll need to use captureDraggingState and handle the preview yourself with css transforms. also set touchSlop to around 5px - makes it way more responsive on mobile.

4

React DND v9’s TouchBackend handles previews completely differently than HTML5Backend. DragPreviewImage won’t work here - you’ll need to build a custom preview solution instead. Here’s what works: Use the preview connector from useDrag and create your own preview component. Track the drag offset and position it absolutely at the touch coordinates. In your draggable component, connect the preview ref and use transform: translate3d() with those drag offset coordinates. This gives you complete control over how the preview looks and keeps everything consistent across touch devices. Just make sure you’re managing the preview’s visibility state and updating its position throughout the drag lifecycle.