Handling Touch Previews with the Updated React-DND Backend

Frontend and Backend Development
1

After the recent upgrade of react-dnd from version 7 to version 9, the touch backend is now built into the library. I’m looking for a way to implement a touch preview on mobile devices since using the traditional DragPreviewImage has not succeeded.

<DragAndDropProvider
  backend={deviceTouch ? MobileDragBackend : DesktopDragBackend}
  config={{ simulateMouse: true, showPreview: true }}
>

Any ideas or suggestions would be greatly appreciated.

2

hey mate, i fixed the preview glitch by hooking into monitr updates. i ended up wrapping my custom elemnt with a slight delay, so it reacts smoother. hope it helps, gl!

3

I encountered similar challenges after upgrading to react-dnd version 9. For me, relying solely on the built-in DragPreviewImage was insufficient on touch devices. Instead, I implemented a reactive state for the preview component that refreshed upon detecting a touch event. The key was to synchronize the drag events with a brief state change that forced the preview to update correctly. Testing different approaches revealed that a slight manual intervention in the event lifecycle offered a more dependable solution to displaying the preview on mobile devices.