question-mark
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:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop 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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found