Handle scrolling while dragging. Fixes #60.

Author: STRML

lib/draggable.js

@@ -539,11 +539,14 @@ module.exports = React.createClass({
     this.setState({
       dragging: true,
       offsetX: dragPoint.clientX - this.state.clientX,
-      offsetY: dragPoint.clientY - this.state.clientY
+      offsetY: dragPoint.clientY - this.state.clientY,
+      scrollX: document.body.scrollLeft,
+      scrollY: document.body.scrollTop
     });
 
 
     // Add event handlers
+    addEvent(document, 'scroll', this.handleScroll);
     addEvent(document, dragEventFor.move, this.handleDrag);
     addEvent(document, dragEventFor.end, this.handleDragEnd);
   },
@@ -565,6 +568,7 @@ module.exports = React.createClass({
     this.props.onStop(e, createUIEvent(this));
 
     // Remove event handlers
+    removeEvent(document, 'scroll', this.handleScroll);
     removeEvent(document, dragEventFor.move, this.handleDrag);
     removeEvent(document, dragEventFor.end, this.handleDragEnd);
   },
@@ -600,6 +604,19 @@ module.exports = React.createClass({
     });
   },
 
+  handleScroll: function(e) {
+    var s = this.state, x = document.body.scrollLeft, y = document.body.scrollTop;
+    var offsetX = x - s.scrollX, offsetY = y - s.scrollY;
+    this.setState({
+      scrollX: x,
+      scrollY: y,
+      clientX: s.clientX + offsetX,
+      clientY: s.clientY + offsetY,
+      offsetX: s.offsetX - offsetX,
+      offsetY: s.offsetY - offsetY
+    });
+  },
+
   onMouseDown: function(ev) {
     // Prevent 'ghost click' which happens 300ms after touchstart if the event isn't cancelled.
     // We don't cancel the event on touchstart because of #37; we might want to make a scrollable item draggable.