Ottieni la posizione relativa tra 2 elementi DOM usando JavaScript

Ho implementato una serie di elementi trascinabili che possono essere rilasciati in alcuni contenitori usando jQuery. Ciò di cui ho bisogno è un’animazione che sposti un elemento in un contenitore specifico senza l’interazione dell’utente. Il problema è che gli elementi e i contenitori di rilascio si trovano in parti completamente diverse del DOM e sono posizionati per lo più utilizzando il float.

Tutto ciò di cui ho bisogno è un codice per ottenere la differenza di posizione assoluta tra 2 elementi DOM mobili, preferibilmente usando jQuery. L’unica cosa che ho trovato erano alcuni hack che analizzavano il DOM ma sempre molto specifici del browser (es. “Questo non funziona bene con Firefox o IE o qualsiasi altra cosa”).

Il meglio sarebbe qualcosa del genere:

var distance = getDistance(element1, element2); 

o in notazione jQuery:

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

Non ho mai usato jQuery, ho solo cercato API, quindi posso presumere che tu possa fare quanto segue:

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

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

Che mi dici di quanto segue?

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