shift forward/backward when the dragging element's midline crosses a …

[evanc]

Hello,

This resolves the issue reported in #428 and #333 - when the height difference between rows is extreme, they sort out-of-order.

This sandbox demonstrates the issue. Try dragging Item 1 between Item 2 and Item 3.

Here's what happens:

Item 3 slides up before Item 2.

Here's the updated behavior: https://codesandbox.io/s/react-sortable-hoc-starter-vjllg

As you can see, the items now shift in the correct order.

I changed the logic that determines when to shift a list item. In the released version of react-sortable-hoc, the list item shifts differently depending on whether you're moving a taller item over a shorter item (or wider/narrower as it happens). When items are of greatly varying size, they shift out of order.

My change will cause the list item being dragged over to shift whenever the midpoint of the dragged item crosses the midpoint of the list item. This provides a much more consistent experience.

I realize this is a fairly noticeable change in some cases, so I've also prepared an updated version of the storybook so you can see how this change affects other types of sortable lists. I think it feels either the same or better in every case.

[evanc]

~actually this seems like it still breaks in certain circumstances. I'll update this with a fix.~

Updated- and it should work in every supported situation now. I've also updated the examples.

[Mathster0598]

Would love to see this PR live, been having the same problems.

[Luncher]

I also encountered the same problem. How did you solve it later?

@evanc @Mathster0598 @nickdekesel