[bug] Grid DND with different hight items causes recursive position change

[sanex3339]

We have a CSS Grid DND container containing items with different height. When dragging a top item to the second line, it causes infinite position change, i believe because the height of the second row is changing.

See the video:

2023-12-11.14.06.30.mov

I see that the official demo shows grid-like layout using inline-block and it works well.
With the display:flex + flex-wrap: wrap + flex-basis, that simulates grid layout, it works as well.

But it'd be nice to use CSS Grids

We use the React and have the following config for the sortablejs/react:

animation={150}
swapThreshold={0.25}
emptyInsertThreshold={0}

Expected behavior

No infinite position change when in our case.

Versions - Look in your package.json for this information:
"react-sortablejs": "6.1.4",
"sortablejs": "1.15.0",

Also the same with the latest 1.15.1, also 1.15.1 introduces additional issues

[owen-m1]

I can't reproduce this, wondering if you could create a demo JSBin so that I can try it. Or share the CSS you used in the video.

[owen-m1]

Could you verify if it's fixed in 1.15.2?

[VineethK336]

Hello! I am able to replicate the issue even in 1.15.2. Here's a repro: https://stackblitz.com/edit/react-vn8b5d?file=src%2FApp.js,src%2FGrid.js,src%2FGridItem.js,src%2Findex.js,src%2Fstyle.css,package.json

Happens only when you try to move a smaller item in the position of the longer item.

Flickering.of.grid.items.mov

[VineethK336]

If a plain JS repro helps, you check out this one: https://stackblitz.com/edit/js-rmkuwx?file=index.js,index.html,style.css

Same issue, try dragging 5th element onto the bottom half of 3rd element, you can see the flicker happen.

Plain.js.repro.mov

[owen-m1]

Thank you, grid elements with dynamic size is not fully supported yet. In a future update I can add a grid direction option.

[gregg-cbs]

I am seeing this in April 2025.

What could help is the swapThreshold working on x and y axis. Right now swap threshold only applies when moving something left to right in a grid but up and down it seems swapping happens at the edges of the item and not within it.

I image swapThreshold as a box within each item, if the threshold is set to 1 the box is as big as the item, if it is set to 0.5 it is centered in each item and is only half the width and height, then if that threshold box is breached the swapping happens.

Im not sure how swapThreshold is calculated at the moment but it seems if it is improved it could help with grid items.

[innodonni]

There seems to be issues with CSS Grid regardless of whether the elements are dynamically sized or not. (#2439)
I fear this is not simple to fix, but for reference, using debounce could make it more bearable.
The unmaintained gridstrap library takes a completely different approach to this problem and while I don't think it is immune to this issue, it is worth referring to if you are fine with using a Bootstrap 3-like grid layout.

[gregg-cbs]

Yeah it still persists even when all my grid items are square... in fact it almost seems worse now that they are all the same size.

Metafizzy's Packery draggable is so smooth on mobile and is such a nice package BUT the way it orders items when you drag is not like a sort and you cannot use flex or grid to style it, you have to use float.
https://packery.metafizzy.co/
https://codepen.io/desandro/pen/DmrqvE (demo)
https://www.npmjs.com/package/packery (js npm package)

The gridstrap is unmaintained with is unfortunate.