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

Try to support sortables of different sizes. #109

Open Kapelianovych opened 6 months ago

Kapelianovych commented 6 months ago

Hello. I was able to correctly reposition adjacent Sortables of different sizes. But problem arouse when I tried to drag an item further than the adjacent droppable. The problem, I think, relates to the #9 issue. Here is an example. Let's say we have a horizontal list of 3 elements. We try to move the first one over the second element.

|____| |__| |__|
   1     2    3

They are swapped correctly.

|__| |____| |__|
  2     1     3

But if we continue moving towards third element, we see that there is a big gap between moved second and moved third element.

Third element may overlap with the second one if we are moving smaller element towards bigger ones.

That's because third element positions itself according to the layout of the second element of the original list, not the changed layout of the current second element.

|__|   |_|_|___|
  2      3   1

Surprisingly, the first element positions correctly, but becomes overlapped with the third element. I couldn't solve this problem. I am probably missing something or my understanding of the issue reason is not correct. @martinpengellyphillips I think I need your help with this, at least to verify that my guess is correct.