Sortable grid with different item sizes
See original GitHub issueHey
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 theDragOverlay
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 Results From Across the Web
JQuery Sortable Grid Functionality without Identical Dimensions
sortable grid with variable element's dimensions - it is a visual mess, as elements of different size moving multiple times, jumping up and...
Read more >Handling differently sized grid draggable items #720 - GitHub
I'm in the processes of building a nested sortable grid (similar to this example). My difference to this example is that the sortable...
Read more >jQuery Sortable Documentation - Grid Integration - Kendo UI ...
You can use the Kendo UI Sortable widget to reorder the items in a Grid by dragging and ... As a result, its...
Read more >jQuery UI Sortable grid Option - GeeksforGeeks
In this article, we will learn how to use the jQuery UI Sortable grid Option. Using this option, we can snap the sorting...
Read more >Sortable | jQuery UI
Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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!