Only apply user-select hack if drag is started

Previously the user-select hack is applied whenever mouseDown on an
element matching the selector, with the right kind of click.

But if the onStart method returns false then the drag is aborted, but
the user-select hack is still applied. Because the drag is not running
the hack is not unapplied on mouseUp. This leads to a whole series of
";user-select: none;; user-select: none;; ..." appearing on the body tag
and the inability to select text on the page until a valid drag happens.

This commit moves the hack application to after the last short circuit
to ensure dragging is actually happening.

Author: davidstubbs

example/index.html

@@ -135,6 +135,9 @@ <h1>React Draggable</h1>
           <Draggable axis="y" {...dragHandlers}>
             <div className="box cursor-y">I can only be dragged vertically</div>
           </Draggable>
+          <Draggable onStart={() => false}>
+            <div className="box">I don't want to be dragged</div>
+          </Draggable>
           <Draggable onDrag={this.handleDrag} {...dragHandlers}>
             <div className="box">
               <div>I track my deltas</div>

lib/DraggableCore.es6

@@ -199,10 +199,6 @@ export default class DraggableCore extends React.Component {
       this.setState({touchIdentifier: e.targetTouches[0].identifier});
     }
 
-    // Add a style to the body to disable user-select. This prevents text from
-    // being selected all over the page.
-    if (this.props.enableUserSelectHack) addUserSelectStyles();
-
     // Get the current drag point from the event. This is used as the offset.
     const {x, y} = getControlPosition(e, this);
 
@@ -216,6 +212,9 @@ export default class DraggableCore extends React.Component {
     const shouldUpdate = this.props.onStart(e, coreEvent);
     if (shouldUpdate === false) return;
 
+    // Add a style to the body to disable user-select. This prevents text from
+    // being selected all over the page.
+    if (this.props.enableUserSelectHack) addUserSelectStyles();
 
     // Initiate dragging. Set the current x and y as offsets
     // so we know how much we've moved during the drag. This allows us

specs/draggable.spec.jsx

@@ -301,6 +301,24 @@ describe('react-draggable', function () {
       TestUtils.Simulate.mouseUp(node);
       expect(document.body.getAttribute('style')).toEqual('');
     });
+
+    it('should not add and remove user-select styles when onStart returns false', function () {
+      function onStart() { return false; }
+
+      drag = TestUtils.renderIntoDocument(
+        <Draggable onStart={onStart}>
+          <div />
+        </Draggable>
+      );
+
+      var node = ReactDOM.findDOMNode(drag);
+
+      expect(document.body.getAttribute('style')).toEqual('');
+      TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
+      expect(document.body.getAttribute('style')).toEqual('');
+      TestUtils.Simulate.mouseUp(node);
+      expect(document.body.getAttribute('style')).toEqual('');
+    });
   });
 
   describe('interaction', function () {