search

thisbeyond / solid-dnd

A lightweight, performant, extensible drag and drop toolkit for Solid JS.
https://solid-dnd.com
MIT License
516 stars 34 forks source link

Add support for sortables of irregular sizes. #97

Open Gami13 opened 1 year ago

Gami13 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 https://github.com/thisbeyond/solid-dnd/issues/32#issuecomment-1115021365

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 commented 1 year ago

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 commented 8 months ago

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.