Simplify implementation by using CSS Transforms instead of positioning.

Speeds up framerate as well but kills IE8 support.

Author: STRML

README.md

@@ -17,6 +17,17 @@ $ npm install react-draggable
 $ bower install react-draggable
 ```
 
+## Details
+
+A `<Draggable>` element wraps an existing element and extends it with new event handlers and styles.
+It does not create a wrapper element in the DOM.
+
+Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current
+positioning (relative, absolute, or static). Elements can also be moved between drags without incident.
+
+If the item you are dragging already has a CSS Transform applied, it will be overwritten by `<Draggable>`. Use
+an intermediate wrapper (`<Draggable><span>...</span></Draggable>`) in this case.
+
 ## Example
 
 ```js

lib/draggable.js

@@ -10,10 +10,10 @@ var classNames = require('classnames');
 //
 
 function createUIEvent(draggable) {
-	// State changes are often (but not always!) async. We want the latest value.
-	var state = draggable._pendingState || draggable.state;
+  // State changes are often (but not always!) async. We want the latest value.
+  var state = draggable._pendingState || draggable.state;
   return {
-  	node: draggable.getDOMNode(),
+    node: draggable.getDOMNode(),
     position: {
       top: state.clientY,
       left: state.clientX
@@ -126,18 +126,20 @@ function removeEvent(el, event, handler) {
 }
 
 function snapToGrid(draggable, clientX, clientY) {
-	var directionX = clientX < parseInt(draggable.state.clientX, 10) ? -1 : 1;
-	var directionY = clientY < parseInt(draggable.state.clientY, 10) ? -1 : 1;
+  var stateX = parseInt(draggable.state.clientX, 10);
+  var stateY = parseInt(draggable.state.clientY, 10);
+  var directionX = clientX < stateX ? -1 : 1;
+  var directionY = clientY < stateY ? -1 : 1;
 
-	clientX = Math.abs(clientX - parseInt(draggable.state.clientX, 10)) >= draggable.props.grid[0] ?
-	    (parseInt(draggable.state.clientX, 10) + (draggable.props.grid[0] * directionX)) :
-	    draggable.state.clientX;
+  clientX = Math.abs(clientX - stateX) >= draggable.props.grid[0] ?
+      (stateX + (draggable.props.grid[0] * directionX)) :
+      stateX;
 
-	clientY = Math.abs(clientY - parseInt(draggable.state.clientY, 10)) >= draggable.props.grid[1] ?
-	    (parseInt(draggable.state.clientY, 10) + (draggable.props.grid[1] * directionY)) :
-	    draggable.state.clientY;
+  clientY = Math.abs(clientY - stateY) >= draggable.props.grid[1] ?
+      (stateY + (draggable.props.grid[1] * directionY)) :
+      stateY;
 
-	return [clientX, clientY];
+  return [clientX, clientY];
 }
 
 // Useful for preventing blue highlights all over everything when dragging.
@@ -149,6 +151,21 @@ var userSelectStyle = {
   userSelect: 'none',
 };
 
+function createCSSTransform(style) {
+  if (!style.x && !style.y) return {};
+  // Replace unitless items with px
+  var x = style.x + 'px';
+  var y = style.y + 'px';
+  return {
+    transform: 'translate(' + x + ',' + y + ')',
+    WebkitTransform: 'translate(' + x + ',' + y + ')',
+    OTransform: 'translate(' + x + ',' + y + ')',
+    msTransform: 'translate(' + x + ',' + y + ')',
+    MozTransform: 'translate(' + x + ',' + y + ')'
+  };
+}
+
+
 //
 // End Helpers.
 //
@@ -315,23 +332,12 @@ module.exports = React.createClass({
     onStop: React.PropTypes.func,
 
     /**
-     * A workaround option which can be passed if onMouseDown needs to be accessed, since it'll always be blocked (due to that there's internal use of onMouseDown)
-     *
+     * A workaround option which can be passed if onMouseDown needs to be accessed,
+     * since it'll always be blocked (due to that there's internal use of onMouseDown)
      */
     onMouseDown: React.PropTypes.func,
   },
 
-  componentDidMount: function() {
-  	var node = this.getDOMNode();
-  	this.setState({
-  		mounted: true,
-  		startX: node.offsetLeft,
-  		startY: node.offsetTop,
-  		clientX: node.offsetLeft,
-  		clientY: node.offsetTop
-  	});
-  },
-
   componentWillUnmount: function() {
     // Remove any leftover event handlers
     removeEvent(window, dragEventFor['move'], this.handleDrag);
@@ -354,19 +360,13 @@ module.exports = React.createClass({
 
   getInitialState: function () {
     return {
-      // Whether or not this has been mounted
-      mounted: false,
-
-      // Whether or not currently dragging
+      // Whether or not we are currently dragging.
       dragging: false,
 
-      // Start top/left of this.getDOMNode()
-      startX: 0, startY: 0,
-
-      // Offset between start top/left and mouse top/left
+      // Offset between start top/left and mouse top/left while dragging.
       offsetX: 0, offsetY: 0,
 
-      // Current top/left of this.getDOMNode()
+      // Current transform x and y.
       clientX: 0, clientY: 0
     };
   },
@@ -379,8 +379,6 @@ module.exports = React.createClass({
     //     return
     // }
 
-    var node = this.getDOMNode();
-
     // Make it possible to attach event handlers on top of this one
     this.props.onMouseDown(e);
 
@@ -392,15 +390,13 @@ module.exports = React.createClass({
 
     var dragPoint = getControlPosition(e);
 
-    // Initiate dragging
+    // Initiate dragging. Set the current x and y as offsets
+    // so we know how much we've moved during the drag. This allows us
+    // to drag elements around even if they have been moved, without issue.
     this.setState({
       dragging: true,
-      offsetX: parseInt(dragPoint.clientX, 10),
-      offsetY: parseInt(dragPoint.clientY, 10),
-      // Reset starting offsets. It's possible this item might have been
-      // moved by external forces, class changes, whatever.
-      startX: node.offsetLeft,
-      startY: node.offsetTop
+      offsetX: dragPoint.clientX - this.state.clientX,
+      offsetY: dragPoint.clientY - this.state.clientY
     });
 
     // Call event handler
@@ -433,20 +429,20 @@ module.exports = React.createClass({
   handleDrag: function (e) {
     var dragPoint = getControlPosition(e);
 
-    // Calculate top and left
-    var clientX = (this.state.startX + (dragPoint.clientX - this.state.offsetX));
-    var clientY = (this.state.startY + (dragPoint.clientY - this.state.offsetY));
+    // Calculate X and Y
+    var clientX = dragPoint.clientX - this.state.offsetX;
+    var clientY = dragPoint.clientY - this.state.offsetY;
 
     // Snap to grid if prop has been provided
     if (Array.isArray(this.props.grid)) {
       var coords = snapToGrid(this, clientX, clientY);
       clientX = coords[0], clientY = coords[1];
     }
 
-    // Update top and left
+    // Update transform
     this.setState({
-    	clientX: clientX,
-    	clientY: clientY
+      clientX: clientX,
+      clientY: clientY
     });
 
     // Call event handler
@@ -456,28 +452,24 @@ module.exports = React.createClass({
   render: function () {
     // Create style object. We extend from existing styles so we don't
     // remove anything already set (like background, color, etc).
-    // We do completely overwrite the position.
-    var style = this.props.children.props.style || {};
-    if (this.state.mounted) {
-      style = assign({}, userSelectStyle, style, {
-        // Set top if vertical drag is enabled
-        top: canDragY(this) ?
-          this.state.clientY :
-          this.state.startY,
-
-        // Set left if horizontal drag is enabled
-        left: canDragX(this) ?
-          this.state.clientX :
-          this.state.startX,
-
-        position: 'absolute'
-      });
-
-      // We only position with top/left. Delete bottom/right as they
-      // will screw us up.
-      delete style.bottom;
-      delete style.right;
-    }
+    var childStyle = this.props.children.props.style || {};
+
+    // Add a CSS transform to move the element around. This allows us to move the element around
+    // without worrying about whether or not it is relatively or absolutely positioned.
+    // If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>
+    // has a clean slate.
+    var transform = createCSSTransform({
+      // Set left if horizontal drag is enabled
+      x: canDragX(this) ?
+        this.state.clientX :
+        0,
+
+      // Set top if vertical drag is enabled
+      y: canDragY(this) ?
+        this.state.clientY :
+        0
+    });
+    var style = assign({}, userSelectStyle, childStyle, transform);
 
     // Set zIndex if currently dragging and prop has been provided
     if (this.state.dragging && !isNaN(this.props.zIndex)) {

specs/draggable.spec.js

@@ -25,7 +25,9 @@ describe('react-draggable', function () {
       var output = renderer.getRenderOutput();
 
       expect(output.props.className).toEqual('foo react-draggable');
-      expect(output.props.style).toEqual({color: 'black'});
+      expect(output.props.style.color).toEqual('black');
+      // This should get added
+      expect(output.props.style.userSelect).toEqual('none');
     });
 
     it('should honor props', function () {
@@ -84,6 +86,25 @@ describe('react-draggable', function () {
       TestUtils.Simulate.mouseUp(drag.getDOMNode());
       expect(called).toEqual(true);
     });
+
+    it('should render with translate()', function () {
+      var drag = TestUtils.renderIntoDocument(
+        <Draggable>
+          <div />
+        </Draggable>
+      );
+
+      var node = drag.getDOMNode();
+
+      TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
+      // FIXME why doesn't simulate on the window work?
+      // TestUtils.Simulate.mouseMove(window, {clientX: 100, clientY: 100});
+      drag.handleDrag({clientX: 100, clientY:100}); // hack
+      TestUtils.Simulate.mouseUp(node);
+
+      var style = node.getAttribute('style');
+      expect(style.indexOf('transform: translate(100px, 100px);')).not.toEqual(-1);
+    });
   });
 
   describe('interaction', function () {
@@ -92,7 +113,6 @@ describe('react-draggable', function () {
 
       TestUtils.Simulate.mouseDown(drag.getDOMNode());
       expect(drag.state.dragging).toEqual(true);
-      expect(drag.state.mounted).toEqual(true);
     });
 
     it('should only initialize dragging onmousedown of handle', function () {