Obtenir la position relative entre 2 éléments DOM en utilisant JavaScript

Question

J'ai implémenté un ensemble d'éléments déplaçables qui peuvent être déposés dans certains conteneurs en utilisant jQuery. Ce dont j'ai besoin, c'est d'une animation qui déplace un élément vers un conteneur spécifique sans interaction de l'utilisateur. Le problème est que les éléments et les conteneurs de dépôt sont complètement dans différentes parties du DOM et la plupart du temps positionnés en utilisant float. Tout ce dont j'ai besoin, c'est d'un code pour obtenir la différence de position absolue entre 2 éléments DOM flottants, de préférence en utilisant jQuery. La seule chose que j'ai trouvée étaient des hacks analysant le DOM mais toujours très spécifique au navigateur (par exemple, "cela ne fonctionne pas bien avec Firefox ou IE ou autre").

Le mieux serait quelque chose comme ceci:

var distance = getDistance(element1, element2); 

ou en notation jQuery:

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

Answer 1

Je ne ai jamais utilisé jQuery, juste regardé API, donc je peux supposer que vous pouvez faire ce qui suit:

 
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

Utilisation de javascript pur.

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'en est-il de ce qui suit?

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