14

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

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

最好是这样的:

var distance = getDistance(element1, element2);

或在 jQuery 表示法中:

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

3 回答 3

22

我从未使用过 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);
于 2008-10-22T12:49:37.847 回答
1

使用纯 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));
于 2008-10-22T12:59:50.540 回答
1

下面的呢?

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);
于 2008-10-22T13:38:39.620 回答