How to implement drag preview for mobile devices in ReactDND v9

Backend
1

I’m working with ReactDND and having trouble getting drag previews to work properly on mobile devices. After the library updated from version 7 to version 9, the touch backend got integrated directly into the main package. I can’t seem to get DragPreviewImage to function correctly when using touch interactions.

<DndProvider
  backend={isMobile ? TouchBackend : HTML5Backend}
  options={{ enableMouseEvents: true, preview: true }}
>

The drag functionality works fine on desktop browsers, but on touch devices the preview either doesn’t show up or behaves strangely. Has anyone found a working solution for creating custom drag previews that work across both desktop and mobile platforms in the newer ReactDND versions?

2

wait, are you handling the preview state right in ur drag source hook? what’s your useDrag setup look like? sometimes mobile just needs explicit isDragging state management for the preview. have u tried combining both backends instead of switching between them?

3

Yeah, hit this same issue. Set enableTouchEvents: true in your TouchBackend options - don’t just use enableMouseEvents. Also check your preview ref handling in the drag source since mobile Safari can be finicky there. Adding delayTouchStart: 200 helps too - gives the touch time to register before dragging starts.

4

Had the same problem when I migrated to ReactDND v9. TouchBackend renders previews totally differently than HTML5Backend. Skip DragPreviewImage entirely - use useDragLayer instead to build a custom drag layer that actually works on both desktop and mobile. Position it absolutely and update based on monitor.getClientOffset(). Make sure your custom layer grabs the touch coordinates properly and applies them to your preview component’s transform style. This sidesteps all the wonky native preview stuff on mobile while keeping everything working normally on desktop.