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

我已经实现了一组可拖动的元素，可以使用jQuery将它们放入一些容器中。 我需要的是一个动画，可以在没有用户交互的情况下将元素移动到特定容器。 问题是元素和drop容器位于DOM的完全不同的部分，并且主要使用float定位。

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

最好是这样的：

var distance = getDistance(element1, element2); 

或者以jQuery表示法：

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

Answer 1

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

 var o1 = $（element1）.offset（）;
 var o2 = $（element2）.offset（）;
 var dx = o1.left  -  o2.left;
 var dy = o1.top  -  o2.top;
 var distance = Math.sqrt（dx * dx + dy * dy）;

Answer 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)); 

Answer 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);