Merge pull request #8 from cjblomqvist/enhancements

Adding start position and onMouseDown support.

Author: mzabriskie

lib/draggable.js

@@ -2,7 +2,6 @@
 
 /** @jsx React.DOM */
 var React = require('react/addons');
-var invariant = require('react/lib/invariant');
 var emptyFunction = require('react/lib/emptyFunction');
 
 function createUIEvent(draggable) {
@@ -144,6 +143,25 @@ module.exports = React.createClass({
 		 */
 		grid: React.PropTypes.arrayOf(React.PropTypes.number),
 
+		/**
+		 * `start` specifies the x and y that the dragged item should start at
+		 *
+		 * Example:
+		 *
+		 * ```jsx
+		 * 	var App = React.createClass({
+		 * 	    render: function () {
+		 * 	        return (
+		 * 	            <Draggable start={{x: 25, y: 25}}>
+		 * 	                <div>I start with left: 25px; top: 25px;</div>
+		 * 	            </Draggable>
+		 * 	        );
+		 * 	    }
+		 * 	});
+		 * ```
+		 */
+		start: React.PropTypes.object,
+
 		/**
 		 * `zIndex` specifies the zIndex to use while dragging.
 		 *
@@ -221,7 +239,13 @@ module.exports = React.createClass({
 		 *	}
 		 * ```
 		 */
-		onStop: React.PropTypes.func
+		onStop: React.PropTypes.func,
+
+		/**
+		 * A workaround option which can be passed if onMouseDown needs to be accessed, since it'll always be blocked (due to that there's internal use of onMouseDown)
+		 *
+		 */
+		onMouseDown: React.PropTypes.func
 	},
 
 	componentWillUnmount: function() {
@@ -236,10 +260,15 @@ module.exports = React.createClass({
 			handle: null,
 			cancel: null,
 			grid: null,
+			start: {
+				x: 0,
+				y: 0
+			},
 			zIndex: NaN,
 			onStart: emptyFunction,
 			onDrag: emptyFunction,
-			onStop: emptyFunction
+			onStop: emptyFunction,
+			onMouseDown: emptyFunction
 		};
 	},
 
@@ -255,11 +284,14 @@ module.exports = React.createClass({
 			offsetX: 0, offsetY: 0,
 
 			// Current top/left of this.getDOMNode()
-			clientX: 0, clientY: 0
+			clientX: this.props.start.x, clientY: this.props.start.y
 		};
 	},
 
 	handleMouseDown: function (e) {
+		// Make it possible to attach event handlers on top of this one
+		this.props.onMouseDown(e);
+
 		var node = this.getDOMNode();
 
 		// Short circuit if handle or cancel prop was provided and selector doesn't match