Adding support for cancel

Author: mzabriskie

lib/draggable.js

@@ -68,9 +68,9 @@ module.exports = React.createClass({
 		 * 	var App = React.createClass({
 		 * 	    render: function () {
 		 * 	    	return (
-		 * 	    	 	<Draggable handle="h2">
+		 * 	    	 	<Draggable handle=".handle">
 		 * 	    	 	  <div>
-		 * 	    	 	      <h2>Click me to drag</h2>
+		 * 	    	 	      <div className="handle">Click me to drag</div>
 		 * 	    	 	      <div>This is some other content</div>
 		 * 	    	 	  </div>
 		 * 	    		</Draggable>
@@ -81,6 +81,28 @@ module.exports = React.createClass({
 		 */
 		handle: React.PropTypes.string,
 
+		/**
+		 * `cancel` specifies a selector to be used to prevent drag initialization.
+		 *
+		 * Example:
+		 *
+		 * ```jsx
+		 * 	var App = React.createClass({
+		 * 	    render: function () {
+		 * 	        return(
+		 * 	            <Draggable cancel=".cancel">
+		 * 	                <div>
+		 * 	                	<div className="cancel">You can't drag from here</div>
+		 *						<div>Dragging here works fine</div>
+		 * 	                </div>
+		 * 	            </Draggable>
+		 * 	        );
+		 * 	    }
+		 * 	});
+		 * ```
+		 */
+		cancel: React.PropTypes.string,
+
 		/**
 		 * Called when dragging starts.
 		 *
@@ -146,6 +168,7 @@ module.exports = React.createClass({
 		return {
 			axis: 'both',
 			handle: null,
+			cancel: null,
 			onStart: emptyFunction,
 			onDrag: emptyFunction,
 			onStop: emptyFunction
@@ -171,7 +194,8 @@ module.exports = React.createClass({
 	handleMouseDown: function (e) {
 		var node = this.getDOMNode();
 
-		if (this.props.handle && !matchesSelector(e.target, this.props.handle)) {
+		if ((this.props.handle && !matchesSelector(e.target, this.props.handle)) ||
+			(this.props.cancel && matchesSelector(e.target, this.props.cancel))) {
 			return;
 		}