Erhalten relative Position zwischen 2 DOM-Elementen mit JavaScript

Question

Ich habe eine Reihe von ziehbaren Elementen implementiert, die in einige Container mit jQuery abgelegt werden können. Was ich brauche, ist eine Animation, die ein Element ohne Benutzerinteraktion in einen bestimmten Container verschiebt. Das Problem ist, dass die Elemente und die Drop-Container vollständig in verschiedenen Teilen des DOM und meist mit Float positioniert sind.

Alles, was ich brauche, ist ein Code, um den absoluten Positionsunterschied zwischen 2 Floating-DOM-Elementen zu erhalten, vorzugsweise mit jQuery. Das einzige, was ich fand, waren einige Hacks, die das DOM nach oben analysierten, aber immer sehr Browser-spezifisch (z. B. "das funktioniert nicht gut mit Firefox oder IE oder was auch immer").

Am besten wäre so etwas wie dieses:

var distance = getDistance(element1, element2); 

oder in jQuery Notation:

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

Answer 1

ich nie jQuery verwendet, nur API nachgeschlagen, so kann ich annehmen, dass Sie folgendes tun:

 
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

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

Answer 3

Was ist mit den folgenden?

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