Resized dragged item loses position from cursor

[KenanYusuf]

I am trying to recreate the sortable grid with a large first tile example from Storybook and seeing an issue with dragging to and from the first item's position. It looks like the transform position of the dragged item is incorrect in relation to the user's cursor (see video below).

Example

See the code here:
https://codesandbox.io/s/ecstatic-pine-zs8nj?file=/src/SortableItem.jsx

Kapture.2021-01-07.at.14.37.19.mp4

Thanks for making such an intuitive drag and drop library, really excited to see this project progress!

[clauderic]

Hey @KenanYusuf, currently variable sized grid only works well when using a <DragOverlay/>

[KenanYusuf]

@clauderic thank you, I've managed to get the desired effect with DragOverlay!

For anyone interested in a working version of this: https://codesandbox.io/s/vigorous-sanderson-hdysk

[clauderic]

This looks great, thanks for sharing back with the community @KenanYusuf ❤️

Made a few minor tweaks:

• Using presentational components to get a better separation of concerns between sortable and non-sortable componeents https://docs.dndkit.com/api-documentation/draggable/drag-overlay#presentational-components
• Added handling of onDragCancel event
• Other stylistic tweaks such as adding Grid component, adding drop animations, moving initial state to external JSON file.

https://codesandbox.io/s/dndkit-sortable-image-grid-py6ve