feat: support to use absolute offset positioning

Currently `react-draggable` uses `transform: translate(...)` to change
position of dragable component. Issue with using of transform is that it
creates a new stacking context and thus prevents some css attributes
like `mix-blend-multiply` from working in child components.

This change adds a new `useTransfrom` property. If `useTransfrom` is
set to false, absolute positioning and left/top offset will be used
instead of using `transfrom`.

Author: offlinehacker

example/example.js

@@ -206,6 +206,11 @@ class App extends React.Component {
             </div>
           </div>
         </Draggable>
+        <Draggable {...dragHandlers} defaultPosition={{x: 50, y: 750}} useTransform={false}>
+          <div className="box">
+            I don't use transform for positioning, rather I have absolute position and use left/top offset.
+          </div>
+        </Draggable>
 
       </div>
     );

lib/Draggable.js

@@ -3,7 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import clsx from 'clsx';
-import {createCSSTransform, createSVGTransform} from './utils/domFns';
+import {
+  createCSSOffset,
+  createCSSTransform,
+  createSVGTransform,
+} from './utils/domFns';
 import {canDragX, canDragY, createDraggableData, getBoundPosition} from './utils/positionFns';
 import {dontSetMe} from './utils/shims';
 import DraggableCore from './DraggableCore';
@@ -30,6 +34,7 @@ export type DraggableDefaultProps = {
   defaultClassNameDragged: string,
   defaultPosition: ControlPosition,
   scale: number,
+  useTransform: boolean,
 };
 
 export type DraggableProps = {
@@ -174,7 +179,8 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
     defaultClassNameDragging: 'react-draggable-dragging',
     defaultClassNameDragged: 'react-draggable-dragged',
     defaultPosition: {x: 0, y: 0},
-    scale: 1
+    scale: 1,
+    useTransform: true
   };
 
   // React 16.3+
@@ -340,6 +346,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
       position,
       positionOffset,
       scale,
+      useTransform,
       ...draggableCoreProps
     } = this.props;
 
@@ -366,12 +373,14 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
     // If this element was SVG, we use the `transform` attribute.
     if (this.state.isElementSVG) {
       svgTransform = createSVGTransform(transformOpts, positionOffset);
-    } else {
+    } else if (useTransform) {
       // 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.
       style = createCSSTransform(transformOpts, positionOffset);
+    } else {
+      style = createCSSOffset(transformOpts, positionOffset);
     }
 
     // Mark with class while dragging

lib/utils/domFns.js

@@ -126,6 +126,7 @@ export function createSVGTransform(controlPos: ControlPosition, positionOffset:
   const translation = getTranslation(controlPos, positionOffset, '');
   return translation;
 }
+
 export function getTranslation({x, y}: ControlPosition, positionOffset: PositionOffsetControlPosition, unitSuffix: string): string {
   let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;
   if (positionOffset) {
@@ -136,6 +137,16 @@ export function getTranslation({x, y}: ControlPosition, positionOffset: Position
   return translation;
 }
 
+export function createCSSOffset({x, y}: ControlPosition, positionOffset: PositionOffsetControlPosition): Object {
+  const unitSuffix = 'px';
+  if (positionOffset) {
+    const defaultX = `${(typeof positionOffset.x === 'string') ? positionOffset.x : positionOffset.x + unitSuffix}`;
+    const defaultY = `${(typeof positionOffset.y === 'string') ? positionOffset.y : positionOffset.y + unitSuffix}`;
+    return {left: defaultX, top: defaultY};
+  }
+  return {position: 'absolute', left: x + unitSuffix, top: y + unitSuffix};
+}
+
 export function getTouch(e: MouseTouchEvent, identifier: number): ?{clientX: number, clientY: number} {
   return (e.targetTouches && findInArray(e.targetTouches, t => identifier === t.identifier)) ||
          (e.changedTouches && findInArray(e.changedTouches, t => identifier === t.identifier));

specs/draggable.spec.jsx

@@ -256,6 +256,23 @@ describe('react-draggable', function () {
       assert(style.indexOf('transform: translate(100px, 100px);') >= 0);
     });
 
+    it('should render with style left/top for DOM nodes if useTranslate is false', function () {
+      let dragged = false;
+      drag = TestUtils.renderIntoDocument(
+        <Draggable onDrag={function() { dragged = true; }} useTransform={false}>
+          <div />
+        </Draggable>
+      );
+
+      const node = ReactDOM.findDOMNode(drag);
+      simulateMovementFromTo(drag, 0, 0, 100, 100);
+
+      const style = node.getAttribute('style');
+      assert(dragged === true);
+      assert(style.indexOf('left: 100px;') >= 0);
+      assert(style.indexOf('top: 100px;') >= 0);
+    });
+
     it('should render with positionOffset set as string transform and handle subsequent translate() for DOM nodes', function () {
       let dragged = false;
       drag = TestUtils.renderIntoDocument(

typings/index.d.ts

@@ -16,7 +16,8 @@ declare module 'react-draggable' {
     defaultClassNameDragged: string,
     defaultPosition: ControlPosition,
     positionOffset: PositionOffsetControlPosition,
-    position: ControlPosition
+    position: ControlPosition,
+    useTransform: boolean,
   }
 
   export type DraggableEvent = React.MouseEvent<HTMLElement | SVGElement>