diff --git a/example/index.html b/example/index.html index 2de857a7..69b224cf 100644 --- a/example/index.html +++ b/example/index.html @@ -135,6 +135,9 @@

React Draggable

I can only be dragged vertically
+ false}> +
I don't want to be dragged
+
I track my deltas
diff --git a/lib/DraggableCore.es6 b/lib/DraggableCore.es6 index 0539059b..898bd618 100644 --- a/lib/DraggableCore.es6 +++ b/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 diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx index 822b2417..c0c741f8 100644 --- a/specs/draggable.spec.jsx +++ b/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( + +
+ + ); + + 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 () {