Fix for using window as scrolling container (clauderic#306)

* Fix for using window as scrolling container

* fix issue with touches on mobile

Author: aminland

src/SortableContainer/index.js

@@ -109,18 +109,20 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
        *  snapshots will serialize window, causing a RangeError
        *  https://github.com/clauderic/react-sortable-hoc/issues/249
        */
-      const contentWindow = this.props.contentWindow || window;
 
       this.container = typeof getContainer === 'function'
         ? getContainer(this.getWrappedInstance())
         : findDOMNode(this);
       this.document = this.container.ownerDocument || document;
-      this.scrollContainer = useWindowAsScrollContainer
-        ? this.document.body
-        : this.container;
+
+      const contentWindow = this.props.contentWindow || this.document.defaultView || window;
+
       this.contentWindow = typeof contentWindow === 'function'
         ? contentWindow()
         : contentWindow;
+      this.scrollContainer = useWindowAsScrollContainer
+        ? this.document.scrollingElement || this.document.documentElement
+        : this.container;
 
       for (const key in this.events) {
         if (this.events.hasOwnProperty(key)) {
@@ -273,8 +275,8 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
         this.offsetEdge = this.getEdgeOffset(node);
         this.initialOffset = this.getOffset(e);
         this.initialScroll = {
-          top: this.scrollContainer.scrollTop,
-          left: this.scrollContainer.scrollLeft,
+          top: this.container.scrollTop,
+          left: this.container.scrollLeft,
         };
 
         this.initialWindowScroll = {
@@ -453,10 +455,22 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
     }
 
     getOffset(e) {
-      return {
-        x: e.touches ? e.touches[0].pageX : e.pageX,
-        y: e.touches ? e.touches[0].pageY : e.pageY,
-      };
+      if (e.touches && e.touches.length) {
+        return {
+          x: e.touches[0].pageX,
+          y: e.touches[0].pageY,
+        };
+      } else if (e.changedTouches && e.changedTouches.length) {
+        return {
+          x: e.changedTouches[0].pageX,
+          y: e.changedTouches[0].pageY,
+        };
+      } else {
+        return {
+          x: e.pageX,
+          y: e.pageY,
+        };
+      }
     }
 
     getLockPixelOffsets() {
@@ -568,15 +582,15 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
     animateNodes() {
       const {transitionDuration, hideSortableGhost, onSortOver} = this.props;
       const nodes = this.manager.getOrderedRefs();
-      const deltaScroll = {
-        left: this.scrollContainer.scrollLeft - this.initialScroll.left,
-        top: this.scrollContainer.scrollTop - this.initialScroll.top,
+      const containerScrollDelta = {
+        left: this.container.scrollLeft - this.initialScroll.left,
+        top: this.container.scrollTop - this.initialScroll.top,
       };
       const sortingOffset = {
-        left: this.offsetEdge.left + this.translate.x + deltaScroll.left,
-        top: this.offsetEdge.top + this.translate.y + deltaScroll.top,
+        left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left,
+        top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top,
       };
-      const scrollDifference = {
+      const windowScrollDelta = {
         top: (window.pageYOffset - this.initialWindowScroll.top),
         left: (window.pageXOffset - this.initialWindowScroll.left),
       };
@@ -641,9 +655,9 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
             if (
               index < this.index &&
               (
-                ((sortingOffset.left + scrollDifference.left) - offset.width <= edgeOffset.left &&
-                (sortingOffset.top + scrollDifference.top) <= edgeOffset.top + offset.height) ||
-                (sortingOffset.top + scrollDifference.top) + offset.height <= edgeOffset.top
+                ((sortingOffset.left + windowScrollDelta.left) - offset.width <= edgeOffset.left &&
+                (sortingOffset.top + windowScrollDelta.top) <= edgeOffset.top + offset.height) ||
+                (sortingOffset.top + windowScrollDelta.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
@@ -665,9 +679,9 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
             } else if (
               index > this.index &&
               (
-                ((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
+                ((sortingOffset.left + windowScrollDelta.left) + offset.width >= edgeOffset.left &&
+                (sortingOffset.top + windowScrollDelta.top) + offset.height >= edgeOffset.top) ||
+                (sortingOffset.top + windowScrollDelta.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
@@ -688,13 +702,13 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
           } else {
             if (
               index > this.index &&
-              (sortingOffset.left + scrollDifference.left) + offset.width >= edgeOffset.left
+              (sortingOffset.left + windowScrollDelta.left) + offset.width >= edgeOffset.left
             ) {
               translate.x = -(this.width + this.marginOffset.x);
               this.newIndex = index;
             } else if (
               index < this.index &&
-              (sortingOffset.left + scrollDifference.left) <= edgeOffset.left + offset.width
+              (sortingOffset.left + windowScrollDelta.left) <= edgeOffset.left + offset.width
             ) {
               translate.x = this.width + this.marginOffset.x;
               if (this.newIndex == null) {
@@ -705,13 +719,13 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
         } else if (this.axis.y) {
           if (
             index > this.index &&
-            (sortingOffset.top + scrollDifference.top) + offset.height >= edgeOffset.top
+            (sortingOffset.top + windowScrollDelta.top) + offset.height >= edgeOffset.top
           ) {
             translate.y = -(this.height + this.marginOffset.y);
             this.newIndex = index;
           } else if (
             index < this.index &&
-            (sortingOffset.top + scrollDifference.top) <= edgeOffset.top + offset.height
+            (sortingOffset.top + windowScrollDelta.top) <= edgeOffset.top + offset.height
           ) {
             translate.y = this.height + this.marginOffset.y;
             if (this.newIndex == null) {