使用 JavaScript 获取 2 个 DOM 元素之间的相对位置

Posted 2023-05-09

【中文标题】使用 JavaScript 获取 2 个 DOM 元素之间的相对位置

【英文标题】：Get relative position between 2 DOM elements using JavaScript

【发布时间】：2010-09-18 12:59:39

【问题描述】：

我已经实现了一组可以使用 jQuery 拖放到某些容器中的可拖动元素。我需要的是一个无需用户交互即可将元素移动到特定容器的动画。问题是元素和放置容器位于完全 DOM 的不同部分，并且大多使用浮动定位。

我只需要一些代码来获取 2 个浮动 DOM 元素之间的绝对位置差异，最好使用 jQuery。我发现的唯一一件事是一些向上解析 DOM 的 hack，但总是非常特定于浏览器（例如“这不适用于 Firefox 或 IE 或其他任何东西”）。

最好是这样的：

var distance = getDistance(element1, element2);

或者用 jQuery 表示法：

var distance = $(element1).distanceTo($(element2));

【参考方案1】：

我从未使用过 jQuery，只是查找了 API，所以我可以假设您可以执行以下操作：

var o1 = $(element1).offset(); var o2 = $(element2).offset(); var dx = o1.left - o2.left; var dy = o1.top - o2.top; var 距离 = Math.sqrt(dx * dx + dy * dy);

【讨论】：

这不起作用，因为 .offset() 只返回父元素的相对位置。由于父元素不相同，因此无法使用这些值。顺便说一句，对角线距离部分并不重要，我期待 left 和 top 值;-)

好吧，我不同意你的看法。根据 jQuery 参考资料 (docs.jquery.com/CSS)，offset 获取“第一个匹配元素相对于视口的当前偏移量”。 viewport 是关键字，不是 offsetParent

偏移页面上的示例非常具有误导性。示例加载在 iframe 中，这使得位置看起来仅相对于父级，而实际上是相对于文档（在本例中为 iframe）

我可以验证这个答案是否正确：在此处查看我的工作示例：jsbin.com/ojede

$(elem1).offset( relativeTo : elem2 )

【参考方案2】：

使用纯 javascript。

var dx = obj1.offsetLeft - obj2.offsetLeft;
var dy = obj1.offsetTop - obj2.offsetTop;
var distance = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2));

【讨论】：

这里和谢尔盖的回答一样... offsetLeft 和 offsetTop 只能在同一个父元素内工作。

【参考方案3】：

接下来呢？

var isIE = navigator.appName.indexOf("Microsoft") != -1;

function getDistance(obj1, obj2)
    var obj1 = document.getElementById(obj1);
    var obj2 = document.getElementById(obj2);
    var pos1 = getRelativePos(obj1);
    var pos2 = getRelativePos(obj2);
    var dx = pos1.offsetLeft - pos2.offsetLeft;
    var dy = pos1.offsetTop - pos2.offsetTop;
    return x:dx, y:dy;

function getRelativePos(obj)
var pos = offsetLeft:0,offsetTop:0;
while(obj!=null)
    pos.offsetLeft += obj.offsetLeft;
    pos.offsetTop += obj.offsetTop;
    obj = isIE ? obj.parentElement : obj.offsetParent;

return pos;

//
var obj = getDistance("element1","element2")
alert(obj.x+" | "+obj.y);

【讨论】：

不需要isIE 测试。为什么不只是obj = obj.offsetParent || obj.parentElement（或任何需要的）。