Question: Can sortable items render different sizes on drag start?

[jquense]

👋 thanks for awesome library, really enjoying it. A pattern that we'd to implement for sortable lists where the items are variable (sometimes long) heights in potential tall lists is to have items display as a smaller (maybe constant height) version of themselves when dragging starts. The question is whether this is possible with dndkit, and if so what hooks need to be used to make it happen. My initial attempts haven't being very fruitful because it appears that onDragStart is too late to change the shapes of items.

[HelKyle]

To better understand what problems you are facing, could you provide a CodeSandbox demo link?

[jquense]

Here is one, where the issue is likely the transition makes the initial measurement incorrect: https://codesandbox.io/s/dnd-kit-sortable-forked-zpfng?file=/src/Item.jsx

I am actually still trying to understand why i'm seeing worse behavior in our app vs the codesandbox, i think it's related to multiple containers, will investigate

[clauderic]

@jquense the problem with your example is indeed the transition, @dnd-kit measures items right after dragging begins, but since you have a transition applied on the height changes, the height is incorrect at the point in time where it is measured.

As a temporary workaround, you can disable the height transition and it should work fine.

This is something I'm working on fixing in this PR #561

[clauderic]

This should now be fixed in the latest releases of @dnd-kit

[Akash187]

I think I am facing the same error.

Screen.Recording.2023-01-25.at.4.13.24.AM.mov