Add support for sortables of irregular sizes.

[Gami13]

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

[Kapelianovych]

What if, when a sortable element is over another sortable element, emit an event with the same data as for onDragEnd handler, 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 the For or Index components are used to draw lists, so there won't be much performance loss.
Sticking with the current behaviour when elements are repositioned with the translate3d CSS property is not sufficient, because in order to show correct positions other elements have to be moved also.
@martinpengellyphillips what do you think?

[martinpengellyphillips]

@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]

I tried to re-render the list with onDragOver and 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 using Index and trying to avoid replacing a whole DOM subtrees though. Well, an item component is complex enough to make impact on the transition 😔.

[spikecodes]

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.