2012-08-23 7 views
14

Ich versuche, ein Skript zu erstellen, zeichnen Sie etwas in einem Element mit der Maus, und ich verwende Raphaeljs, um das zu tun.jQuery Offset-Top funktioniert nicht richtig

Für korrekte Zeichnung muss ich top und left von input‍‍ Element finden. Ich verwende var offset = $("#input").offset();, um left und top zu erhalten.

Aber der top Wert ist nicht korrekt. Es ist 10px niedriger als die echte top Entfernung. Ich denke, dass die 10px vielleicht in verschiedenen Auflösungen ändern, dann kann ich 10px zu ihm normalerweise dann nicht hinzufügen Ich möchte wissen, wie ich das Problem beheben kann!

Ich habe meinen Test hochgeladen here.

+0

Haben Sie die Ränder oder den Abstand für ein beliebiges enthaltendes Element überprüft? – Archer

+0

@Archer ja. Ich habe und es gab keine "Marge" oder "Polsterung"! –

Antwort

21

Die jQuery .offset() Funktion hat this limitation:

Anmerkung: jQuery unterstützt nicht die Offset-Koordinaten der verborgenen Elemente bekommen oder einem Anteil von Rahmen, Ränder oder Polsterung auf dem Körperelement festgelegt.

Der Körper in diesem Fall hat einen 10px oberen Rand, weshalb Ihre Zeichnung um 10 Pixel aus ist.

Empfohlene Lösung:

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

Vielen Dank für diese Notiz !!! – user805981

+1

Wie ein Zusatz zur Verwendung der Eigenschaft offset(): Ich habe scheinbar fehlerhafte Ergebnisse erhalten (ich habe versucht, mit offset den Abstand einer Navigationsliste vom oberen Rand des Ansichtsfensters zu finden, um Verwenden Sie diesen Wert als Einstellung "oberer Offset" im Add-on "Affix" des Bootstraps. Was ich entdeckte, war, dass Offset die Entfernung falsch berechnete, es sei denn, alle HTML-Elemente * über * dem fraglichen Listenelement (dh diejenigen, die seinen Platz auf der Seite bestimmten) hatten explizit deklarierte Höhen. Ihnen bestimmte Höhen in CSS zu geben, löste es. –

4

Ich habe zwei verschiedene Lösungen:

1) Sie oben Elements Gesamthöhe mit outerHeight(true) Methode berechnen kann. Diese Methode berechnet Höhe mit Rändern, Auffüllen und Grenzen.

Und diese wird keinen Konflikt erstellen, wird es wahren Wert zurückgeben. Here is jsFiddle example.

html

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

jQuery

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

2) Wenn Sie top CSS an das Element definiert, die relativ zum Körper postioned ist, können Sie diesen Wert verwenden:

parseInt($('#myEle').css('top')); 
+0

Ich habe es versucht! es gibt nur eine Ausnahme zurück, die besagt, dass "top" nicht existiert! –

+0

Ich testete '$ (" # input "). Css (" top ")' das Ergebnis ist [hier] (http://jsfiddle.net/3ZVHx/) –

+0

Ich fügte einen zweiten Weg, lang, aber viel fester –

1

Nachdem mit diesem für eine Weile zu kämpfen und bewerten verschiedene mögliche Antworten, die ich zu dem Schluss gekommen, dass jQuery Offset() oben (und vermutlich DOM-API, die es verwendet) ist zu unzuverlässig. für den allgemeinen Gebrauch. Es dokumentiert nicht nur HTML-Level-Margen, sondern liefert in einigen anderen Fällen auch unerwartete Ergebnisse.

Position(). Top funktioniert, aber es ist möglicherweise nicht praktisch/möglich, die Seite so zu gestalten, dass sie äquivalent ist.

Zum Glück habe ich gefunden, dass element.getBoundingClientRect().top bekommt die Position relativ zum Viewport perfekt. Sie können dann auf $ (Dokument) .scrollTop() hinzufügen, um die Position von der Oberseite des Dokuments zu erhalten, falls erforderlich.