Le décalage de jQuery ne fonctionne pas correctement

Je suis en train de créer un script de dessiner quelque chose dans un élément avec la souris et je suis en utilisant Raphaeljs de le faire.

Pour corriger le dessin j'ai besoin de trouver top et left de input‍‍ élément. Je suis en utilisant var offset = $("#input").offset(); pour obtenir left et top.

Mais la top valeur n'est pas correcte. C'est 10px inférieure à la réalité top distance. Je pense que le 10px peut-être changer dans les différentes résolutions alors je ne peux pas ajouter 10px à elle normalement puis je veux savoir comment puis-je résoudre le problème!

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

source d'informationauteur ahmadali shafiee

  1. 22

    Le jQuery .offset() fonction a cette limitation:

    Remarque: jQuery ne prend pas en charge l'obtention du décalage des coordonnées des éléments cachés ou de comptabilité pour les bordures, les marges, ou de remplissage situé sur le corps de l'élément.

    Le corps, dans ce cas, un 10px bordure supérieure, c'est pourquoi votre dessin est désactivée par 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" );
  2. 5

    J'ai deux solutions:

    1) Vous pouvez calculer au-dessus de l'élément de hauteur totale avec outerHeight(vrai) méthode. Cette méthode permettra de calculer la hauteur avec des marges, des remplissages et des frontières.

    Et ce ne crée pas de conflitil sera de retour de la valeur réelle.
    Voici jsFiddle exemple.

    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 de l'élément qui est postioned par rapport au corps, vous pouvez utiliser cette valeur trop:

    parseInt($('#myEle').css('top'));
  3. 3

    Après des combats avec ça pendant un moment et avoir examiné les différentes réponses possibles j'en ai conclu que jQuery offset().top (et probablement d'API DOM qu'il utilise) est trop peu fiable pour une utilisation générale. Non seulement est-il documenté comme excluant html niveau des marges, mais il renvoie également à des résultats inattendus dans plusieurs autres cas.

    position().top fonctionne, mais il peut ne pas être possible /possible pour la conception de la page de sorte qu'il est équivalent.

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