Resolves regression issue by introducing offsetParent to <DraggableCore>

Allows nodes to use an arbitrary node as origin instead of the parent. This is useful, when the parent's position is changing. When used, resolves react-grid-layout#170

This issue was introduced by a398097

Author: Aeneas Rekkas (arekkas)

README.md

@@ -249,6 +249,7 @@ on itself and thus must have callbacks attached to be useful.
   cancel: string,
   disabled: boolean,
   enableUserSelectHack: boolean,
+  offsetParent: HTMLElement,
   grid: [number, number],
   handle: string,
   onStart: DraggableEventHandler,

lib/DraggableCore.es6

@@ -66,6 +66,16 @@ export default class DraggableCore extends React.Component {
      */
     enableUserSelectHack: PropTypes.bool,
 
+    /**
+     * `offsetParent`, if set, uses the passed DOM node to compute drag offsets
+     * instead of using the parent node.
+     */
+    offsetParent: function(props, propName) {
+      if (process.browser && props[propName] && props[propName].nodeType !== 1) {
+        throw new Error('Draggable\'s offsetParent must be a DOM Node.');
+      }
+    },
+
     /**
      * `grid` specifies the x and y that dragging should snap to.
      */
@@ -152,6 +162,7 @@ export default class DraggableCore extends React.Component {
     cancel: null,
     disabled: false,
     enableUserSelectHack: true,
+    offsetParent: null,
     handle: null,
     grid: null,
     transform: null,

lib/utils/domFns.es6

@@ -2,6 +2,7 @@
 import {findInArray, isFunction, int} from './shims';
 import browserPrefix, {getPrefix, browserPrefixToStyle, browserPrefixToKey} from './getPrefix';
 
+import type DraggableCore from '../DraggableCore';
 import type {ControlPosition} from './types';
 
 let matchesSelectorFunc = '';
@@ -95,9 +96,9 @@ export function innerWidth(node: HTMLElement): number {
 }
 
 // Get from offsetParent
-export function offsetXYFromParentOf(evt: {clientX: number, clientY: number}, node: HTMLElement & {offsetParent: HTMLElement}): ControlPosition {
-  const offsetParent = node.offsetParent || document.body;
-  const offsetParentRect = node.offsetParent === document.body ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();
+export function offsetXYFromParentOf(evt: {clientX: number, clientY: number}, node: HTMLElement & {offsetParent: HTMLElement}, draggableCore: DraggableCore): ControlPosition {
+  const offsetParent = draggableCore.props.offsetParent || node.offsetParent || document.body;
+  const offsetParentRect = offsetParent ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();
 
   const x = evt.clientX + offsetParent.scrollLeft - offsetParentRect.left;
   const y = evt.clientY + offsetParent.scrollTop - offsetParentRect.top;
@@ -116,12 +117,12 @@ export function createSVGTransform({x, y}: {x: number, y: number}): string {
 
 export function getTouch(e: MouseEvent, 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));
+(e.changedTouches && findInArray(e.changedTouches, t => identifier === t.identifier));
 }
 
 export function getTouchIdentifier(e: MouseEvent): ?number {
   if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
-  if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
+if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
 }
 
 // User-select Hacks:

lib/utils/positionFns.es6

@@ -66,7 +66,7 @@ export function canDragY(draggable: Draggable): boolean {
 export function getControlPosition(e: MouseEvent, touchIdentifier: ?number, draggableCore: DraggableCore): ?ControlPosition {
   const touchObj = typeof touchIdentifier === 'number' ? getTouch(e, touchIdentifier) : null;
   if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch
-  return offsetXYFromParentOf(touchObj || e, ReactDOM.findDOMNode(draggableCore));
+  return offsetXYFromParentOf(touchObj || e, ReactDOM.findDOMNode(draggableCore), draggableCore);
 }
 
 // Create an data object exposed by <DraggableCore>'s events