sirve - Obtener una posición relativa entre 2 elementos DOM usando JavaScript

que es id en 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 gotas están en partes completamente diferentes del DOM y en su mayoría se ubican usando float.

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 que analizaban el DOM, pero siempre eran muy específicos del navegador (por ejemplo, "esto no funciona bien con Firefox o IE o lo que sea").

Lo mejor sería algo como esto:

var distance = getDistance(element1, element2);

o en notación jQuery:

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

Answer 1

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

Answer 2

Nunca utilicé jQuery, solo busqué API, así que puedo 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 3

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