Improve touch scrolling

JakeSidSmith · Jan 27, 2015 · 50d3afc · 50d3afc
1 parent 1dcd65f
commit 50d3afc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "react-reorderable",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Drag & drop, touch enabled, reorderable / sortable list, React component",
   "homepage": "https://github.com/JakeSidSmith/react-reorderable",
   "license": "MIT",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-reorderable",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Drag & drop, touch enabled, reorderable / sortable list, React component",
   "author": "Jake 'Sid' Smith",
   "license": "MIT",

diff --git a/reorderable.js b/reorderable.js
@@ -138,17 +138,30 @@
         });
       },
       onMouseUp: function (event) {
+        // Item clicked
         if (typeof this.props.itemClicked === 'function' && !this.state.held && !this.state.moved && this.state.dragged) {
           this.props.itemClicked(event, this.state.dragged.item, this.state.dragged.index);
         }
 
+        // Reorder callback
         if (this.state.held && this.state.dragged && typeof this.props.callback === 'function') {
           var listElements = this.nodesToArray(this.getDOMNode().childNodes);
           var newIndex = listElements.indexOf(this.state.dragged.target);
 
           this.props.callback(event, this.state.dragged.item, this.state.dragged.index, newIndex, this.state.list);
         }
 
+        // Handle after-scroll
+        if ((event.touches || DEVELOPMENT) && !this.state.held) {
+          if (this.state.velocity.y !== 0 && this.props.lock !== 'vertical') {
+            this.afterScrollYInterval = setInterval(this.afterScrollY, this.constants.SCROLL_RATE);
+          }
+
+          if (this.state.velocity.x !== 0 && this.props.lock !== 'horizontal') {
+            this.afterScrollXInterval = setInterval(this.afterScrollX, this.constants.SCROLL_RATE);
+          }
+        }
+
         this.setState({
           dragged: undefined,
           draggedStyle: undefined,
@@ -159,16 +172,6 @@
           moved: false
         });
 
-        if (event.touches || DEVELOPMENT) {
-          if (this.state.velocity.y !== 0) {
-            this.afterScrollYInterval = setInterval(this.afterScrollY, this.constants.SCROLL_RATE);
-          }
-
-          if (this.state.velocity.x !== 0) {
-            this.afterScrollXInterval = setInterval(this.afterScrollX, this.constants.SCROLL_RATE);
-          }
-        }
-
         clearTimeout(this.holdTimeout);
         clearInterval(this.scrollIntervalY);
         this.scrollIntervalY = undefined;
@@ -329,13 +332,13 @@
         var element = this.getDOMNode();
 
         // If scrollable vertically
-        if (element.scrollHeight > this.elementHeightMinusBorders(element)) {
+        if (this.props.lock !== 'vertical' && element.scrollHeight > this.elementHeightMinusBorders(element)) {
           // Handle scrolling
           element.scrollTop = this.state.downPos.scrollTop + this.state.downPos.clientY - event.clientY;
         }
 
         // If scrollable horizontally
-        if (element.scrollWidth > this.elementWidthMinusBorders(element)) {
+        if (this.props.lock !== 'horizontal' && element.scrollWidth > this.elementWidthMinusBorders(element)) {
           // Handle scrolling
           element.scrollLeft = this.state.downPos.scrollLeft + this.state.downPos.clientX - event.clientX;
         }