Updated animation logic to account for window scroll position.

Author: AlastairTaft

src/SortableContainer/index.js

@@ -270,6 +270,11 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
           top: this.scrollContainer.scrollTop,
           left: this.scrollContainer.scrollLeft,
         };
+        
+        this.initialWindowScroll = {
+          top: window.scrollY,
+          left: window.scrollX,
+        };
 
         const fields = node.querySelectorAll('input, textarea, select');
         const clonedNode = node.cloneNode(true);
@@ -440,7 +445,6 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
     }
 
     getOffset(e) {
-      debugger
       return {
         x: e.touches ? e.touches[0].pageX : e.pageX,
         y: e.touches ? e.touches[0].pageY : e.pageY,
@@ -507,11 +511,16 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
 
     updatePosition(e) {
       const {lockAxis, lockToContainerEdges} = this.props;
+      
       const offset = this.getOffset(e);
       const translate = {
         x: offset.x - this.initialOffset.x,
         y: offset.y - this.initialOffset.y,
       };
+      // Adjust for window scroll
+      translate.y -= (window.scrollY - this.initialWindowScroll.top)
+      translate.x -= (window.scrollX - this.initialWindowScroll.left)
+
       this.translate = translate;
 
       if (lockToContainerEdges) {
@@ -559,6 +568,10 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
         left: this.offsetEdge.left + this.translate.x + deltaScroll.left,
         top: this.offsetEdge.top + this.translate.y + deltaScroll.top,
       };
+      const scrollDifference = {
+        top: (window.scrollY - this.initialWindowScroll.top),
+        left: (window.scrollX - this.initialWindowScroll.left),
+      }
       this.newIndex = null;
 
       for (let i = 0, len = nodes.length; i < len; i++) {
@@ -570,6 +583,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
           width: this.width > width ? width / 2 : this.width / 2,
           height: this.height > height ? height / 2 : this.height / 2,
         };
+
         const translate = {
           x: 0,
           y: 0,
@@ -618,9 +632,9 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
             if (
               index < this.index &&
               (
-                (sortingOffset.left - offset.width <= edgeOffset.left &&
-                sortingOffset.top <= edgeOffset.top + offset.height) ||
-                sortingOffset.top + offset.height <= edgeOffset.top
+                ((sortingOffset.left + scrollDifference.left) - offset.width <= edgeOffset.left &&
+                (sortingOffset.top + scrollDifference.top) <= edgeOffset.top + offset.height) ||
+                (sortingOffset.top + scrollDifference.top) + offset.height <= edgeOffset.top
               )
             ) {
               // If the current node is to the left on the same row, or above the node that's being dragged
@@ -642,9 +656,9 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
             } else if (
               index > this.index &&
               (
-                (sortingOffset.left + offset.width >= edgeOffset.left &&
-                sortingOffset.top + offset.height >= edgeOffset.top) ||
-                sortingOffset.top + offset.height >= edgeOffset.top + height
+                ((sortingOffset.left + scrollDifference.left) + offset.width >= edgeOffset.left &&
+                (sortingOffset.top + scrollDifference.top) + offset.height >= edgeOffset.top) ||
+                (sortingOffset.top + scrollDifference.top) + offset.height >= edgeOffset.top + height
               )
             ) {
               // If the current node is to the right on the same row, or below the node that's being dragged
@@ -665,13 +679,13 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
           } else {
             if (
               index > this.index &&
-              sortingOffset.left + offset.width >= edgeOffset.left
+              (sortingOffset.left + scrollDifference.left) + offset.width >= edgeOffset.left
             ) {
               translate.x = -(this.width + this.marginOffset.x);
               this.newIndex = index;
             } else if (
               index < this.index &&
-              sortingOffset.left <= edgeOffset.left + offset.width
+              (sortingOffset.left + scrollDifference.left) <= edgeOffset.left + offset.width
             ) {
               translate.x = this.width + this.marginOffset.x;
               if (this.newIndex == null) {
@@ -682,13 +696,13 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
         } else if (this.axis.y) {
           if (
             index > this.index &&
-            sortingOffset.top + offset.height >= edgeOffset.top
+            (sortingOffset.top + scrollDifference.top) + offset.height >= edgeOffset.top
           ) {
             translate.y = -(this.height + this.marginOffset.y);
             this.newIndex = index;
           } else if (
             index < this.index &&
-            sortingOffset.top <= edgeOffset.top + offset.height
+            (sortingOffset.top + scrollDifference.top) <= edgeOffset.top + offset.height
           ) {
             translate.y = this.height + this.marginOffset.y;
             if (this.newIndex == null) {