Получить относительное положение между двумя элементами DOM с использованием JavaScript

Я реализовал набор перетаскиваемых элементов, которые можно сбрасывать в некоторые контейнеры с помощью jQuery. Мне нужна анимация, которая перемещает элемент в конкретный контейнер без взаимодействия с пользователем. Проблема состоит в том, что элементы и контейнеры для сброса находятся в полностью разных частях DOM и в основном расположены с использованием float.

Все, что мне нужно, это некоторый код, чтобы получить абсолютную разницу в позиции между двумя плавающими элементами DOM, предпочтительно используя jQuery. Единственное, что я нашел, это хаки, разборчивые вверх по DOM, но всегда очень специфичные для браузера (например, "это плохо работает с 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 distance = Math.sqrt(dx * dx + dy * dy);

Ответ 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));

Ответ 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);