Resolves regression issue by introducing useBodyAsOrigin to <DraggableCore>

Aeneas Rekkas (arekkas) · Aeneas Rekkas (arekkas) · commit 7b27283c8ff8 · 2016-07-17T18:49:21.000+02:00
Allows nodes to use the body as origin instead of the parent. This is useful, when the parent's position is changing. When used, resolves #170 This issue was introduced by a398097
diff --git a/README.md b/README.md
@@ -249,6 +249,7 @@ on itself and thus must have callbacks attached to be useful.
   cancel: string,
   disabled: boolean,
   enableUserSelectHack: boolean,
+  useBodyAsOrigin: boolean,
   grid: [number, number],
   handle: string,
   onStart: DraggableEventHandler,
diff --git a/lib/DraggableCore.es6 b/lib/DraggableCore.es6
@@ -66,6 +66,18 @@ export default class DraggableCore extends React.Component {
      */
     enableUserSelectHack: PropTypes.bool,
 
+    /**
+     * `useBodyAsOrigin`, if true, uses the <body> node to compute offsets.
+     * If false, the <Draggable>'s parent node will be used instead.
+     *
+     * Using this attribute will break <Draggable> inside of scrollable
+     * elements, except <body>, but makes sense, if <Draggable>'s parent
+     * node is moving around.
+     *
+     * Defaults to `false`.
+     */
+    useBodyAsOrigin: PropTypes.bool,
+
     /**
      * `grid` specifies the x and y that dragging should snap to.
      */
@@ -152,6 +164,7 @@ export default class DraggableCore extends React.Component {
     cancel: null,
     disabled: false,
     enableUserSelectHack: true,
+    useBodyAsOrigin: false,
     handle: null,
     grid: null,
     transform: null,
diff --git a/lib/utils/domFns.es6 b/lib/utils/domFns.es6
@@ -95,9 +95,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.useBodyAsOrigin ? document.body : node.offsetParent || document.body;
+  const offsetParentRect = offsetParent === document.body ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();
 
   const x = evt.clientX + offsetParent.scrollLeft - offsetParentRect.left;
   const y = evt.clientY + offsetParent.scrollTop - offsetParentRect.top;
diff --git a/lib/utils/positionFns.es6 b/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

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