diff --git a/lib/react-ui-tree.js b/lib/react-ui-tree.js index d8527524..3ec661c1 100644 --- a/lib/react-ui-tree.js +++ b/lib/react-ui-tree.js @@ -26,6 +26,10 @@ module.exports = React.createClass({ else this._updated = false; }, + componentDidMount() { + this.refs.scrollParent = this.getScrollParent(); + }, + init(props) { var tree = new Tree(props.tree); tree.isNodeCollapsed = props.isNodeCollapsed; @@ -45,6 +49,25 @@ module.exports = React.createClass({ }; }, + getScrollParent() { + var parents = function(node, ps) { + return null === node.parentNode ? ps : parents(node.parentNode, ps.concat([node])); + }, + + check = function(node) { + var o = "overflow", gpv = "getPropertyValue", gcs = "getComputedStyle"; + return window[gcs](node, null)[gpv](o) + window[gcs](node, null)[gpv](o+"-y") + window[gcs](node, null)[gpv](o+"-x"); + }; + + var ps = parents(this.refs.tree, []); + for (var i = 0;i < ps.length;i += 1) { + if (/(auto|scroll)/.test(check(ps[i]))) { + return ps[i]; + } + } + return document.body; + }, + getDraggingDom() { var tree = this.state.tree; var dragging = this.state.dragging; @@ -77,7 +100,7 @@ module.exports = React.createClass({ var draggingDom = this.getDraggingDom(); return ( - <div className="m-tree"> + <div className="m-tree" ref="tree"> {draggingDom} <Node tree={tree} @@ -103,8 +126,8 @@ module.exports = React.createClass({ this._startX = dom.offsetLeft; this._startY = dom.offsetTop; - this._offsetX = e.clientX; - this._offsetY = e.clientY; + this._offsetX = e.clientX + this.refs.scrollParent.scrollLeft; + this._offsetY = e.clientY + this.refs.scrollParent.scrollTop; this._start = true; window.addEventListener('mousemove', this.drag); @@ -133,8 +156,8 @@ module.exports = React.createClass({ var _offsetY = this._offsetY; var pos = { - x: _startX + e.clientX - _offsetX, - y: _startY + e.clientY - _offsetY + x: _startX + e.clientX + this.refs.scrollParent.scrollLeft - _offsetX, + y: _startY + e.clientY + this.refs.scrollParent.scrollTop - _offsetY }; dragging.x = pos.x; dragging.y = pos.y;