[ADVICE/HELP NEEDED] Maintain scroll position after collapsing accordions durign drag n drop

[sherman89]

I've added functionality to set display: none on the contents of the accordion / expanded table row to make drag n drop easier for the user, but the result is jumpiness due to height change and I'm wondering what would be the most elegant solution to fix this?

I've been experimenting for a couple of days now and so far the best solution I've found is:

• Each draggable reports the height of its subcomponent element to parent list component
• Parent sums up heights of all elements above the draggable element (index smaller than dragged item)
• set a paddingTop to the calculated value above the list so everything stays in place

I've also asked in SO but no answers so far: https://stackoverflow.com/questions/78426433/maintain-row-position-during-drag-n-drop-when-other-rows-collapsed

Any help is greatly appreciated! Thank you! ❤️

PS: Is this bad from a UX/UI standpoint?

[sherman89]

We decided not to do this at all so I'll close this, but if anyone is interested in my workaround, here it is: https://codesandbox.io/p/devbox/dnd-expand-scroll-forked-hx7r2x