React-sortable-hoc: Glitches when a large element is being dragged over a much smaller one

[silvenon]

Try dragging the 1st element over the 2nd one. https://codesandbox.io/s/5vnyz4o34p The 2nd element dances back and forth.

[szszoke]

I'd extend the description of the bug with the following:
It only happens when you try to drag a wide column from left to right. It is working correctly if you reverse the order of the columns in the example above, and try to drag "Foo" from left to right.

[szszoke]

It seems that the issue only occurs when the right side of the dragged element goes off-screen. Try resizing the result pane of the code example. If you make it wide enough, the problem disappears.

[szszoke]

Okay. I think I figured it out. The reason it is glitching is because animateNodes is being called even after the scrollContainer reached it's max scrollLeft offset. The issue stopped with the following change in the autoscroll function:

Old code:

this.scrollContainer.scrollTop += offset.top;
this.scrollContainer.scrollLeft += offset.left;
this.translate.x += offset.left;
this.translate.y += offset.top;
this.animateNodes();

New code:

const {
  scrollWidth,
  clientWidth,
  scrollHeight,
  clientHeight,
} = this.scrollContainer;

const scrollLeftMax = scrollWidth - clientWidth;
const scrollTopMax = scrollHeight - clientHeight;

this.scrollContainer.scrollTop += offset.top;
this.scrollContainer.scrollLeft += offset.left;

if (
  this.scrollContainer.scrollLeft < scrollLeftMax ||
  this.scrollContainer.scrollTop < scrollTopMax
) {
  this.translate.x += offset.left;
  this.translate.y += offset.top;
  this.animateNodes();
}

Basically if this.scrollContainer.scrollLeft reaches the value of scrollLeftMax, it will stop increasing, so we are not doing any scrolling, therefore I believe, calling this.animateNodes is unnecessary.

I've created a fork of this repo, with the possible fix. You can find it here: https://github.com/szabolcsx/react-sortable-hoc

[siriwatknp]

I found this bug too when drag large height element over small height element, the small one does not swap. any workaround?