Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sortable grid with different item sizes

See original GitHub issue

Hey

First thanks for the library, really appreciated!

Based on #41 I tried to create a sortable grid where the items have a different row/col span. I.e. one item is 2x1, another is 1x2 and a third is 1x1: https://codesandbox.io/s/dndkit-sortable-image-grid-forked-wmn92

I’m now facing two problems:

When dragging an item over and item of different size (i.e. drag a 2x2 item over and item that is 1x1) the item will be resized. I tried to change adjustScale on the DragOverlay from true to false but couldn’t figure out any change in behaviour.
When dragging items so that a change in scroll behaviour occures (scroll -> no scroll) then there is a flickering and one is not able to correctly reorder. You can repro this by resizing the browser window in the CSB to approx. 900px height and then drag the show photo to the top left and then back to its original place.

Appreciate any pointers what I’m doing wrong/how to fix these problems.

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

claudericcommented, Feb 4, 2021

I think this is roughly what you’re trying to build: https://codesandbox.io/s/dndkit-sortable-image-grid-forked-bjh7n?file=/src/App.jsx

That’s the lowest effort solution, but it’s also buggy, because the layout is shifting and the collision detection strategy can get into a state where it’s constantly hesitating between two positions while the items are moved in the DOM.

Ideally for a use-case like this, you need to build a custom sorting strategy.

0reactions

justdvlcommented, Apr 10, 2021

Hello @clauderic . Thanks for the Codesandbox example above, very helpful. Is there a way to not fill empty spot in a grid with other element, but leave it empty there? Let’s say I changed your Codesandbox to only have 2 columns, so 1 row can have 2 items. I would like to allow user to take one item to other row and leave just 1 item in that row. If it is possible, how? Thanks. @sventschui I am also experiencing a lot of flickering when collision detection strategy is undecisive. Did you manage to come up with a solution? I am not experienced enough to create PR myself, even though I would love to!