Merge pull request #153 from davidstubbs/master

Only apply user-select hack if drag is started

Author: STRML

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 () {