web-dev-qa-db-fra.com

jQuery offset top ne fonctionne pas correctement

J'essaie de créer un script dessiner quelque chose dans un élément avec la souris et j'utilise Raphaeljs pour ce faire.

Pour un dessin correct, je dois trouver top et left de l'élément ‍ input‍‍. J'utilise var offset = $("#input").offset(); pour obtenir left et top.

Mais la valeur top n'est pas correcte. C'est 10px Inférieur à ‍‍la distance réelle top. Je pense que le 10px Peut changer dans différentes résolutions alors je ne peux pas y ajouter 10px Normalement alors Je veux savoir comment puis-je résoudre le problème!

J'ai téléchargé mon test ici .

javascriptjqueryraphaeloffset
16
ahmadali shafiee

La fonction jQuery .offset() a cette limitation :

Remarque: jQuery ne prend pas en charge l'obtention des coordonnées de décalage des éléments masqués ou la prise en compte des bordures, des marges ou du remplissage définis sur l'élément de corps.

Dans ce cas, le corps a une bordure supérieure de 10 pixels, c'est pourquoi votre dessin est décalé de 10 pixels.

Solution recommandée:

var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );
25
Kevin Nielsen

Après avoir combattu avec cela pendant un certain temps et examiné diverses réponses potentielles, j'ai conclu que jQuery offset (). Top (et probablement l'API DOM qu'il utilise) est trop peu fiable pour une utilisation générale. Non seulement il est documenté comme excluant les marges de niveau html, mais il renvoie également des résultats inattendus dans plusieurs autres cas.

position (). top fonctionne, mais il peut ne pas être pratique/possible de concevoir la page de manière à ce qu'elle soit équivalente.

Heureusement, j'ai trouvé que element.getBoundingClientRect (). Top obtient parfaitement la position par rapport à la fenêtre d'affichage. Vous pouvez ensuite ajouter $ (document) .scrollTop () pour obtenir la position du haut du document si nécessaire.

7
Leo Hendry

J'ai deux solutions différentes:

1) Vous pouvez calculer la hauteur totale de l'élément ci-dessus avec la méthode externalHeight (true) . Cette méthode calcule la hauteur avec les marges, les rembourrages et les bordures.

Et cela ne créera pas de conflit , il renverra la vraie valeur. Voici l'exemple jsFiddle.

html

<div class="header"></div>
<div class="nav"></div>
<div class="myEle"></div>

jQuery

var myEleTop = $('.header').outerHeight(true) + $('.nav').outerHeight(true);

2) Si vous avez défini top css à l'élément qui est posté par rapport au corps, vous pouvez également utiliser cette valeur:

parseInt($('#myEle').css('top'));
5
Barlas Apaydin