[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:

https://github.com/SortableJS/Sortable/assets/9210534/110fce16-8cf0-4e64-b540-9e2f9319ad0f

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.

https://github.com/SortableJS/Sortable/assets/25902483/305a60bb-5221-4ae2-bbc3-f7ccb57318b4

[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.

https://github.com/SortableJS/Sortable/assets/25902483/b4cf4e5b-95c4-4155-9099-8d68ea19abdb

[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.