I am using React DnD to handle dragging and dropping in a React app. I am using the touch backend. In this implementation, I am using a custom drag preview. While dragging, I hide the element that is "being dragged" by animating its max-height to 0. The custom drag preview shows as the user drags. If the user drops the element in an area that is not allowed, the item "being dragged" animates back to it's original height. This is good.
When the item is dropped, I send a redux action that reorders the list of items and puts the previously dragged element into its new location.
However, there is a moment where the dragged item flashes in its current location before the DOM updates and animates the item in its new location.
The max height animations are controlled by CSS classes that are added and removed when isDragging is true.
I have scoured the React DnD docs and examples (which are generally very thorough) and looked at some other open-source projects that have used React DnD, but cannot seem to locate the solution. I'm assuming I am missing something simple like a prop that I can pass. Essentially, I would like isDragging to stay true until the drop action is complete or be able to update a prop in either the endDrag method on the draggable target or the drop function on the droppable target.
I could use vanilla javascript to update the classList inside the endDrag method, but would prefer to use React tools if possible.
Has anyone encountered this issue?
I was able to get around this problem by fixing a known issue with Touch events stopping when a DOM node is unmounted in React.
https://github.com/yahoo/react-dnd-touch-backend/issues/31
In this solution, you create a copy of the DOM node that has the touch event attached to it so that it remains even if React unmounts the component as elements are added and removed during dragging.