Improve translation logic for grid sorting

Author: Brian Ryu

src/SortableContainer/index.js

@@ -1026,7 +1026,7 @@ export default function sortableContainer(
     };
 
     keyUpdatePosition = (disableTransition = false) => {
-      const {transitionDuration} = this.props;
+      const {transitionDuration, disableAutoscroll} = this.props;
       const nodes = this.manager.getOrderedRefs(this.manager.activeKeyLift.collection);
       const targetIndex = getTargetIndex(this.newIndex, this.prevIndex, this.index);
       const targetNode = nodes[nodes.findIndex(({node}) => node.sortableInfo.index === targetIndex)];
@@ -1062,8 +1062,10 @@ export default function sortableContainer(
       };
 
       // Correct translate
-      translate.x = Math.max(Math.min(translate.x, this.maxTranslate.x), this.minTranslate.x);
-      translate.y = Math.max(Math.min(translate.y, this.maxTranslate.y), this.minTranslate.y);
+      if (!disableAutoscroll) {
+        translate.x = Math.max(Math.min(translate.x, this.maxTranslate.x), this.minTranslate.x);
+        translate.y = Math.max(Math.min(translate.y, this.maxTranslate.y), this.minTranslate.y);
+      }
 
       if (transitionDuration && !disableTransition) {
         this.helper.style[
@@ -1074,7 +1076,9 @@ export default function sortableContainer(
         translate.x
       }px,${translate.y}px,0)`;
 
-      this.keyAutoscroll(overflow);
+      if (!disableAutoscroll) {
+        this.keyAutoscroll(overflow);
+      }
     };
 
     keyAutoscroll = ({left, right, top, bottom}) => {
@@ -1103,17 +1107,20 @@ export default function sortableContainer(
       for (let i = 0, len = nodes.length; i < len; i++) {
         const {node} = nodes[i];
         const index = node.sortableInfo.index;
+        const offsetWidth = this.width > node.offsetWidth ? node.offsetWidth / 2 : this.width / 2;
 
         const translate = {
           x: 0,
           y: 0,
         };
-        let {edgeOffset} = nodes[i];
+        let {edgeOffset, boundingRect} = nodes[i];
 
         // If we haven't cached the node's offsetTop / offsetLeft value
         if (!edgeOffset) {
           edgeOffset = getEdgeOffset(node, this.container);
+          boundingRect = node.getBoundingClientRect();
           nodes[i].edgeOffset = edgeOffset;
+          nodes[i].boundingRect = boundingRect;
         }
 
         // Get a reference to the next and previous node
@@ -1124,6 +1131,7 @@ export default function sortableContainer(
         // We need this for calculating the animation in a grid setup
         if (nextNode && !nextNode.edgeOffset) {
           nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container);
+          nextNode.boundingRect = nextNode.node.getBoundingClientRect();
         }
 
         // If the node is the one we're currently animating, skip it
@@ -1145,12 +1153,25 @@ export default function sortableContainer(
             // grid
             if (index < this.index && index >= this.newIndex) {
               // right/down 1
-              translate.x = nextNode.edgeOffset.left - edgeOffset.left;
-              translate.y = nextNode.edgeOffset.top - edgeOffset.top;
+              translate.x = this.width + this.marginOffset.x;
+              if (nextNode &&
+                (boundingRect.left + translate.x + node.offsetWidth >
+                this.containerBoundingRect.left + offsetWidth + this.containerBoundingRect.width)
+              ) {
+                const widthCorrection =
+                  node.offsetWidth - nextNode.boundingRect.width +
+                  nextNode.boundingRect.width - this.width;
+                translate.x = nextNode.edgeOffset.left - edgeOffset.left - widthCorrection;
+                translate.y = nextNode.edgeOffset.top - edgeOffset.top;
+              }
             } else if (index > this.index && index <= this.newIndex) {
               // left/up 1
-              translate.x = prevNode.edgeOffset.left - edgeOffset.left;
-              translate.y = prevNode.edgeOffset.top - edgeOffset.top;
+              translate.x = -(this.width + this.marginOffset.x);
+              if (prevNode && boundingRect.left + translate.x < this.containerBoundingRect.left - offsetWidth) {
+                const widthCorrection = prevNode.boundingRect.width - this.width;
+                translate.x = prevNode.edgeOffset.left - edgeOffset.left + widthCorrection;
+                translate.y = prevNode.edgeOffset.top - edgeOffset.top;
+              }
             }
           } else {
             // x