Can't handle draggable element offsets with transform: translate

[sourav-mehra-lv]

Issue

The library seemingly can't handle draggable element offsets with transform: translate

I’ve run into an issue when adjusting the position of a draggable element. My use case is as follows:

• I use transform: translate to visually adjust the position of the draggable element, making sure the start of the element is positioned under the cursor when the drag starts, no matter where the user drags it from.
• While this visually updates the element’s position in the UI, the underlying drag logic continues to use the original position (before applying the transform styles), which causes a mismatch between the UI position and the droppable logic.

Is there a way to apply this offset to the underlying drag logic as well, so the logic uses the adjusted position, not the original one?

I’d appreciate any suggestions or guidance on how to handle this scenario.

What version of React are you using?

18.3.1

What version of @hello-pangea/dnd are you running?

16.6.0

What browser are you using?

Google Chrome (131.0.6778.205)

Demo

In the attached video, you'll see that once I start dragging the card, I adjust through CSS to be placed under the cursor. But when I drag it into the folders section, the droppable areas (greyed out folders) use the original position of the dragged element to calculate if the draggable file is over the droppable area (as seen when the greyed out folders become normal visually).

screen-recording-2024-12-23.mov