Handling differently sized grid draggable items

[sbesh91]

I'm in the processes of building a nested sortable grid (similar to this example)

My difference to this example is that the sortable containers will also be a grid, and most importantly their will be different sizes of the containing items.

I configured one of the grid items in the demo to be a grid-column: span 2 and am struggling to get this library to individually size each draggable item.

This library seems like a great bet for react projects into the future. I have previously used https://muuri.dev/ for a pure JS application and their mixed size grid drag and drop works as I'd expect for individually sizing each sortable item.

I have been able to accomplish a slightly similar effect with this library by taking inspiration from this issue. The limitation here is that I do have to rely on array sorting and framer-motion to animate between grid states.

Thanks in advance for reading this and for offering any help you've got.

PS: I've remixed this example to help express what I'm seeing locally. If you try to drag a larger item you'll see that there are times when the smaller items are overlapping and not accounting for the size of the larger items. It's almost as if the first item is measured in the grid and then each other grid item is assumed to be that size as well? I'm not entirely sure, but those are some extra thoughts I had.

Here's a fork that combines the approach shared by clauderic

[clauderic]

@dnd-kit doesn't currently have built-in sorting strategies that handle unpredictable layouts. You could try building one yourself, but that's a lot of work.

The general recommended strategy in these scenarios is to update the order of the items onDragOver and pass in a sorting strategy that returns null (<SortableContext strategy={() => null}>), refer to this issue for a more detailed answer: https://github.com/clauderic/dnd-kit/issues/44#issuecomment-757312037

https://codesandbox.io/s/multi-shape-dnd-grid-dnd-kit-forked-6mzmys?file=/src/App.tsx