Repository navigation
Add support for sortables of irregular sizes. #97
Description
Currently when sortables that aren't of the same width in case of horizontal sortable lists when dragging the layout breaks and elements stack on top of each other. This happens because the element that takes place of the one currently being dragged takes it's x position without taking into account the differences in size
Activity
Kapelianovych commentedon Aug 22, 2023
What if, when a sortable element is over another sortable element, emit an event with the same data as for
onDragEndhandler, so it will be easy to change the order of those two elements and the whole sortable list will be re-rendered? In most cases theFororIndexcomponents are used to draw lists, so there won't be much performance loss.Sticking with the current behaviour when elements are repositioned with the
translate3dCSS property is not sufficient, because in order to show correct positions other elements have to be moved also.@martinpengellyphillips what do you think?
martinpengellyphillips commentedon Aug 26, 2023
@Kapelianovych isn't that already possible with
onDragOver?Note that I did have an implementation in the past for computing the transforms for different sizes. Might be inspirational #32 (comment)
At some point you do end up re-implementing the browser layout engine for the css transforms. It might be worth seeing how performance is with directly moving the target nodes 🤔 We do that already in the "board" example when an item moves across boards.
Kapelianovych commentedon Aug 31, 2023
I tried to re-render the list with
onDragOverand this is it. It simply works 👍I noticed that while the list is re-rendering a dragged item freezes for a moment. And that is with 3 items in the list. I am usingIndexand trying to avoid replacing a whole DOM subtrees though. Well, an item component is complex enough to make impact on the transition 😔.spikecodes commentedon Feb 25, 2024
Hi, has there been any updates/progress on this? Trying to implement the dragging of horizontal sortables with different widths and not sure if this is possible without forking the library.
JesseVelden commentedon Apr 11, 2025
This PR #114 also seem to fix this issue!