Javascript Girl
  1. Javascript Girl
  3. Obtenez une position relative entre 2 éléments DOM en utilisant JavaScript
Intereting Posts
L'Autorisation latérale du serveur API API d'Analyse de Google Analytics ne rend pas les graphiques avec C # Obtenir le nom de la propriété de l'objet en tant que chaîne {{$ Index}} de ng-repeat calculé après la fonction de liaison de la directive angulaire. $ Compilez-le? Javascript – définissez une variable à l'aide de la concaténation de chaînes Ouvrir la fancybox sur une autre fancybox ajax Modifiez dynamiquement l'image src en utilisant Jquery ne fonctionnant pas dans IE et Firefox Carte javascript dans la brochure comment actualiser Comment convertir un ensemble d'objets en un objet mappé en JavaScript? Numéro entier de Javascript commençant par zéro Numéro d'augmentation automatique HTML et JavaScript Comment obtenir la valeur String / caractère à partir du code clé; Sélection de JavaScript / cadre de gamme Javascript onclick obtient le div id? Ruby on Rails – Envoyer la variable JavaScript du contrôleur au fichier d'actif Javascript externe Quand NodeList est-il en direct et quand est-il statique?

Obtenez une position relative entre 2 éléments DOM en utilisant JavaScript

J'ai mis en place un ensemble d'éléments draggables qui peuvent être déposés dans certains conteneurs à l'aide de jQuery. Ce dont j'ai besoin, c'est une animation qui déplace un élément vers un conteneur spécifique sans interaction avec l'utilisateur. Le problème est que les éléments et les conteneurs de dépôt sont dans des parties complètement différentes du DOM et sont principalement positionnés à l'aide d'un flotteur.

Tout ce dont j'ai besoin est un code pour obtenir la différence de position absolue entre 2 éléments flottants DOM, en utilisant préférentiellement jQuery. La seule chose que j'ai trouvée étaient des hacks analysant le DOM mais toujours très spécifiques au navigateur (par exemple, "cela ne fonctionne pas bien avec Firefox ou IE ou quoi que ce soit").

Le meilleur serait quelque chose comme ceci: 

var distance = getDistance(element1, element2);

Ou dans la notation jQuery: 

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

Je n'ai jamais utilisé jQuery, j'ai juste consulté l'API, alors 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);

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

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