diff --git a/README.md b/README.md index 34a156bf..3d9acedd 100644 --- a/README.md +++ b/README.md @@ -182,6 +182,11 @@ grid: [number, number], // Example: '.handle' handle: string, +// If desired, you can provide your own offsetParent for drag calculations. +// By default, we use the Draggable's offsetParent. This can be useful for elements +// with odd display types or floats. +offsetParent: HTMLElement, + // Called whenever the user mouses down. Called regardless of handle or // disabled status. onMouseDown: (e: MouseEvent) => void, @@ -249,6 +254,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, diff --git a/lib/DraggableCore.es6 b/lib/DraggableCore.es6 index 832c95f8..64e412fa 100644 --- a/lib/DraggableCore.es6 +++ b/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, diff --git a/lib/utils/domFns.es6 b/lib/utils/domFns.es6 index 9afa67a5..7ae4ad5a 100644 --- a/lib/utils/domFns.es6 +++ b/lib/utils/domFns.es6 @@ -95,9 +95,10 @@ 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 offsetXYFromParent(evt: {clientX: number, clientY: number}, offsetParent: ?HTMLElement): ControlPosition { + if (!offsetParent) offsetParent = document.body; + const isBody = offsetParent === offsetParent.ownerDocument.body; + const offsetParentRect = isBody ? {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 index b2df07b4..e1591bdc 100644 --- a/lib/utils/positionFns.es6 +++ b/lib/utils/positionFns.es6 @@ -1,7 +1,7 @@ // @flow import {isNum, int} from './shims'; import ReactDOM from 'react-dom'; -import {getTouch, innerWidth, innerHeight, offsetXYFromParentOf, outerWidth, outerHeight} from './domFns'; +import {getTouch, innerWidth, innerHeight, offsetXYFromParent, outerWidth, outerHeight} from './domFns'; import type Draggable from '../Draggable'; import type {Bounds, ControlPosition, DraggableData} from './types'; @@ -66,7 +66,11 @@ 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)); + // User can provide an offsetParent if desired. + const offsetParent = draggableCore.props.offsetParent || + ReactDOM.findDOMNode(draggableCore).offsetParent || + document.body; + return offsetXYFromParent(touchObj || e, offsetParent); } // Create an data object exposed by 's events diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx index a0b68a7b..a8f53e5a 100644 --- a/specs/draggable.spec.jsx +++ b/specs/draggable.spec.jsx @@ -456,32 +456,74 @@ describe('react-draggable', function () { }); it('should modulate position on scroll', function (done) { - // This test fails in karma under Chrome & Firefox, positioning quirks - // FIXME: Why? Chrome reports 2x scrollTo, Phantom reports 0x, Firefox reports 1x as it should - var is_ff = navigator.userAgent.toLowerCase().indexOf('Firefox') > -1; - if (!is_ff) return done(); - - var dragCalled = false; + let dragCalled = false; function onDrag(e, coreEvent) { assert(coreEvent.deltaY === 500); dragCalled = true; } drag = TestUtils.renderIntoDocument(
); - var node = ReactDOM.findDOMNode(drag); + const node = ReactDOM.findDOMNode(drag); + + // Create a container we can scroll. I'm doing it this way so we can still access . + // Enzyme (airbnb project) would make this a lot easier. + const fragment = fragmentFromString(` +
+
+
+
+ `); + transplantNodeInto(node, fragment, (f) => f.children[0]); TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0}); assert(drag.state.dragging === true); - document.body.style.height = '10000px'; - window.scrollTo(0, 500); - TestUtils.Simulate.mouseUp(node, {clientX: 0, clientY: 0}); + // Scroll the inner container & trigger a scroll + fragment.scrollTop = 500; + mouseMove(0, 0); + TestUtils.Simulate.mouseUp(node); setTimeout(function() { + assert(drag.state.dragging === false); assert(dragCalled === true); - assert(drag.state.clientY === 500); + assert(drag.state.y === 500); + // Cleanup + document.body.removeChild(fragment); done(); }, 50); + }); + + it('should respect offsetParent on nested div scroll', function (done) { + let dragCalled = false; + function onDrag(e, coreEvent) { + dragCalled = true; + // Because the offsetParent is the body, we technically haven't moved at all relative to it + assert(coreEvent.deltaY === 0); + } + drag = TestUtils.renderIntoDocument(
); + const node = ReactDOM.findDOMNode(drag); + + // Create a container we can scroll. I'm doing it this way so we can still access . + // Enzyme (airbnb project) would make this a lot easier. + const fragment = fragmentFromString(` +
+
+
+
+ `); + transplantNodeInto(node, fragment, (f) => f.children[0]); + + TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0}); + fragment.scrollTop = 500; + + mouseMove(0, 0); + TestUtils.Simulate.mouseUp(node); + setTimeout(function() { + assert(dragCalled); + // Cleanup + document.body.removeChild(fragment); + done(); + }, 50); }); describe('draggable callbacks', function () { @@ -597,3 +639,15 @@ function simulateMovementFromTo(drag, fromX, fromY, toX, toY) { mouseMove(toX, toY); TestUtils.Simulate.mouseUp(node); } + +function fragmentFromString(strHTML) { + var temp = document.createElement('div'); + temp.innerHTML = strHTML; + return temp.children[0]; +} + +function transplantNodeInto(node, into, selector) { + node.parentNode.removeChild(node); + selector(into).appendChild(node); + document.body.appendChild(into); +}