Adding support for drag handle

Author: mzabriskie

lib/draggable.js

@@ -24,6 +24,26 @@ function canDragX(draggable) {
 			draggable.props.axis === 'x';
 }
 
+function isFunction(fn) {
+	return typeof fn === 'function';
+}
+
+function matchesSelector(el, selector) {
+	if (isFunction(el.matches)) {
+		return el.matches(selector);
+	} else if (isFunction(el.webkitMatchesSelector)) {
+		return el.webkitMatchesSelector(selector);
+	} else if (isFunction(el.mozMatchesSelector)) {
+		return el.mozMatchesSelector(selector);
+	} else if (isFunction(el.msMatchesSelector)) {
+		return el.msMatchesSelector(selector);
+	} else if (isFunction(el.oMatchesSelector)) {
+		return el.oMatchesSelector(selector);
+	} else if (isFunction(el.webkitMatchesSelector)) {
+		return el.webkitMatchesSelector(selector);
+	}
+}
+
 module.exports = React.createClass({
 	displayName: 'Draggable',
 
@@ -39,6 +59,28 @@ module.exports = React.createClass({
 		 */
 		axis: React.PropTypes.oneOf(['both', 'x', 'y']),
 
+		/**
+		 * `handle` specifies a selector to be used as the handle that initiates drag.
+		 *
+		 * Example:
+		 *
+		 * ```jsx
+		 * 	var App = React.createClass({
+		 * 	    render: function () {
+		 * 	    	return (
+		 * 	    	 	<Draggable handle="h2">
+		 * 	    	 	  <div>
+		 * 	    	 	      <h2>Click me to drag</h2>
+		 * 	    	 	      <div>This is some other content</div>
+		 * 	    	 	  </div>
+		 * 	    		</Draggable>
+		 * 	    	);
+		 * 	    }
+		 * 	});
+		 * ```
+		 */
+		handle: React.PropTypes.string,
+
 		/**
 		 * Called when dragging starts.
 		 *
@@ -103,6 +145,7 @@ module.exports = React.createClass({
 	getDefaultProps: function () {
 		return {
 			axis: 'both',
+			handle: null,
 			onStart: emptyFunction,
 			onDrag: emptyFunction,
 			onStop: emptyFunction
@@ -126,6 +169,11 @@ module.exports = React.createClass({
 
 	handleMouseDown: function (e) {
 		var node = this.getDOMNode();
+
+		if (this.props.handle && !matchesSelector(e.target, this.props.handle)) {
+			return;
+		}
+
 		this.setState({
 			offsetX: e.clientX,
 			offsetY: e.clientY,