Add moveOnStartChange prop

Author: STRML

README.md

@@ -84,6 +84,9 @@ var App = React.createClass({
 			//   to use (you can use absolute or relative positioning of the child directly), but can be helpful
 			//   for uniformity in your callbacks and with css transforms.
 			//
+			// `moveOnStartChange`, if true (default false), will move the element if there is a change in `start`.
+			//   We set this by default to `false` because it can cause unwanted effects if you are not aware of it.
+			//
 			// `zIndex` specifies the zIndex to use while dragging.
 			//
 			// `onStart` is called when dragging starts.
@@ -95,6 +98,8 @@ var App = React.createClass({
 			<Draggable
 				axis="x"
 				handle=".handle"
+				start={{x: 0, y: 0}}
+				moveOnStartChange={false}
 				grid={[25, 25]}
 				zIndex={100}
 				onStart={this.handleStart}

lib/draggable.js

@@ -386,6 +386,13 @@ module.exports = React.createClass({
       y: React.PropTypes.number
     }),
 
+    /**
+     * `moveOnStartChange`, if true (default false) will move the element if the `start`
+     * property changes.
+     */
+    moveOnStartChange: React.PropTypes.bool,
+
+
     /**
      * `zIndex` specifies the zIndex to use while dragging.
      *
@@ -474,6 +481,14 @@ module.exports = React.createClass({
     onMouseDown: React.PropTypes.func,
   },
 
+  componentWillReceiveProps: function(newProps) {
+    // React to changes in the 'start' param.
+    if (newProps.moveOnStartChange && newProps.start &&
+        (newProps.start.x !== this.state.initialStart.x || newProps.start.y !== this.state.initialStart.y)) {
+      this.setState(this.getInitialState(newProps));
+    }
+  },
+
   componentWillUnmount: function() {
     // Remove any leftover event handlers
     removeEvent(window, dragEventFor['move'], this.handleDrag);
@@ -488,6 +503,7 @@ module.exports = React.createClass({
       handle: null,
       cancel: null,
       grid: null,
+      moveOnStartChange: false,
       start: {x: 0, y: 0},
       zIndex: NaN,
       enableUserSelectHack: true,
@@ -498,7 +514,9 @@ module.exports = React.createClass({
     };
   },
 
-  getInitialState: function () {
+  getInitialState: function (props) {
+    // Handle call from CWRP
+    props = props || this.props;
     return {
       // Whether or not we are currently dragging.
       dragging: false,
@@ -507,7 +525,9 @@ module.exports = React.createClass({
       offsetX: 0, offsetY: 0,
 
       // Current transform x and y.
-      clientX: this.props.start.x, clientY: this.props.start.y
+      clientX: props.start.x, clientY: props.start.y,
+
+      initialStart: props.start
     };
   },