Cancel dragging if callbacks return boolean false.

Author: STRML

lib/draggable.js

@@ -276,6 +276,7 @@ module.exports = React.createClass({
 
     /**
      * Called when dragging starts.
+     * If this function returns the boolean false, dragging will be canceled.
      *
      * Example:
      *
@@ -296,6 +297,7 @@ module.exports = React.createClass({
 
     /**
      * Called while dragging.
+     * If this function returns the boolean false, dragging will be canceled.
      *
      * Example:
      *
@@ -393,12 +395,16 @@ module.exports = React.createClass({
       return;
     }
 
+    // Call event handler. If it returns explicit false, cancel.
+    var shouldStart = this.props.onStart(e, createUIEvent(this));
+    if (shouldStart === false) return;
+
+    var dragPoint = getControlPosition(e);
+
     // Add a style to the body to disable user-select. This prevents text from
     // being selected all over the page.
     addUserSelectStyles(this);
 
-    var dragPoint = getControlPosition(e);
-
     // Initiate dragging. Set the current x and y as offsets
     // so we know how much we've moved during the drag. This allows us
     // to drag elements around even if they have been moved, without issue.
@@ -408,8 +414,6 @@ module.exports = React.createClass({
       offsetY: dragPoint.clientY - this.state.clientY
     });
 
-    // Call event handler
-    this.props.onStart(e, createUIEvent(this));
 
     // Add event handlers
     addEvent(window, dragEventFor['move'], this.handleDrag);
@@ -450,14 +454,15 @@ module.exports = React.createClass({
       clientX = coords[0], clientY = coords[1];
     }
 
+    // Call event handler. If it returns explicit false, cancel.
+    var shouldUpdate = this.props.onDrag(e, createUIEvent(this));
+    if (shouldUpdate === false) return this.handleDragEnd();
+
     // Update transform
     this.setState({
       clientX: clientX,
       clientY: clientY
     });
-
-    // Call event handler
-    this.props.onDrag(e, createUIEvent(this));
   },
 
   render: function () {