TouchBackend not working properly on mobile devices
Author: lokthrowCreated Jun 30, 2025Updated Jul 25, 2025
I am developing a platform that needs to drag, drop, resize and rotate elements. All works fine with the HTML5Backend, the problem starts using the TouchBackend (either as is or through react-dnd-multi-backend).
In my case, I drag an element from a Drawer and drop it in a Box, that works fine. Once the element is created in the Box:
- It can be dragged just touching and moving, but its "preview" appears with a big offset, if I touch first, then touch + move, the "preview" appears where it should.
- Once the element is dropped, it cannot be moved again unless I touch the background and touch the element again.
- If I touch the element I show resize/rotate controls, if I try to use them (even using stopPropagation()), the element seems to be moving, but it is moving AND doing the action (i.e. moving and resizing, when I release the touch it moved and changed its size) but it only should be doing the action.
Expected behavior
- It can be dragged just touching and moving, and the "preview" appears where it should.
- Once the element is dropped, it can be dragged again without touching the background.
- If I touch components inside my draggable element with stopPropagation() the drag should not start.
Desktop (please complete the following information): It is not working in a desktop browser with dev options simulating a touch device nor an Android Simulator with Chrome.
Source: react-dnd/react-dnd