Obtener la posición relativa entre 2 elementos DOM usando JavaScript

Question

Implementé un conjunto de elementos arrastrables que se pueden soltar en algunos contenedores usando jQuery. Lo que necesito es una animación que mueva un elemento a un contenedor específico sin interacción del usuario. El problema es que los elementos y los contenedores de caída se encuentran por completo en diferentes partes del DOM y se posicionan principalmente con flotador.

Todo lo que necesito es un código para obtener la diferencia de posición absoluta entre 2 elementos DOM flotantes, preferiblemente usando jQuery. Lo único que encontré fueron algunos hacks analizando el DOM, pero siempre muy específicos del navegador (por ejemplo, "esto no funciona bien con Firefox o IE o lo que sea").

Mejor sería algo como esto:

var distance = getDistance(element1, element2); 

o en notación jQuery:

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

Answer 1

nunca he usado jQuery, de echar una ojeada a la API, por lo que puede suponer que puede hacer lo siguiente:

 
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

Usando javascript puro.

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

¿Qué hay de lo siguiente?

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