Move user-select:none hack to body from element.

Prevents ugly text selection if you move the mouse too quickly.

Author: STRML

lib/draggable.js

@@ -132,13 +132,8 @@ function snapToGrid(grid, pendingX, pendingY) {
 }
 
 // Useful for preventing blue highlights all over everything when dragging.
-var userSelectStyle = {
-  WebkitUserSelect: 'none',
-  MozUserSelect: 'none',
-  msUserSelect: 'none',
-  OUserSelect: 'none',
-  userSelect: 'none',
-};
+var userSelectStyle = ';user-select: none;-webkit-user-select:none;-moz-user-select:none;' +
+  '-o-user-select:none;-ms-user-select:none;';
 
 function createCSSTransform(style) {
   if (!style.x && !style.y) return {};
@@ -178,6 +173,13 @@ module.exports = React.createClass({
      */
     axis: React.PropTypes.oneOf(['both', 'x', 'y']),
 
+    /**
+     * By default, we add 'user-select:none' attributes to the document body
+     * to prevent ugly text selection during drag. If this is causing problems
+     * for your app, set this to `false`.
+     */
+    enableUserSelectHack: React.PropTypes.bool,
+
     /**
      * `handle` specifies a selector to be used as the handle that initiates drag.
      *
@@ -340,6 +342,7 @@ module.exports = React.createClass({
       cancel: null,
       grid: null,
       zIndex: NaN,
+      enableUserSelectHack: true,
       onStart: emptyFunction,
       onDrag: emptyFunction,
       onStop: emptyFunction,
@@ -377,6 +380,13 @@ module.exports = React.createClass({
       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) {
+      var style = document.body.getAttribute('style') || '';
+      document.body.setAttribute('style', style + userSelectStyle);
+    }
+
     var dragPoint = getControlPosition(e);
 
     // Initiate dragging. Set the current x and y as offsets
@@ -402,6 +412,12 @@ module.exports = React.createClass({
       return;
     }
 
+    // Remove user-select styles.
+    if (this.props.enableUserSelectHack) {
+      var style = document.body.getAttribute('style') || '';
+      document.body.setAttribute('style', style.replace(userSelectStyle, ''));
+    }
+
     // Turn off dragging
     this.setState({
       dragging: false
@@ -458,7 +474,7 @@ module.exports = React.createClass({
         this.state.clientY :
         0
     });
-    var style = assign({}, userSelectStyle, childStyle, transform);
+    var style = assign({}, childStyle, transform);
 
     // Set zIndex if currently dragging and prop has been provided
     if (this.state.dragging && !isNaN(this.props.zIndex)) {