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

Question

我已经实现了一组可拖动的元素,可以使用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);