Scale transform and dragging issue

[nate-kelley-buster]

I am running into an issue where the parent div has a css transform (scale) which is causing the drag functionality to behave strangely. Is there a possible workaround to this issue?

Here is an example of what I am talking about https://codesandbox.io/s/draggable-tabs-antd-5-8-5-forked-nxl43c?file=/demo.tsx

[infinite2009]

I met the same issue. It seems that dnd-kit cached the origin bounding client size.

[k-jiang]

I met the same issue as well. And found that @efossvold's idea helps a lot: https://github.com/clauderic/dnd-kit/issues/638#issuecomment-1096672529

    const style: React.CSSProperties = {
        transform: `translate3d(${transform.x / scale}px, ${transform.y / scale}px, 0)`,
        // Rest of your styles ...
    };

Apply it on to your dragging elements so it will compensate the scale drifting.

[abhishekchotaliya]

thanks, @k-jiang for the updates! it has saved a lot of time for others!

[ssalka]

I am also having this issue and have found partial success with using a scale parameter to fix the dragging position, however it seems dndkit is internally using the original transform to determine the isOver value.

Possibly this could be solved with custom collision detection? Though I haven't looked into it yet, otherwise I would think dndkit needs to be able to take in some prop indicating the zoom/scale so it can compensate to return the right transform & isOver values automatically.