17

マウスで要素に何かを描画するスクリプトを作成しようとしていますが、Raphaeljsそれを行うために使用しています。

正しく描画するには、 ‍<code>input‍‍</code> 要素を見つける必要がありtopますleft。とvar offset = $("#input").offset();を取得するために使用しています。lefttop

しかし、そのtop値は正しくありません。実際の距離10pxよりも短いです。topさまざま10pxな解像度で変更される可能性があり、10px通常は追加できないので、問題を解決する方法を知りたいです!

ここにテストをアップロードしました。

4

3 に答える 3

25

jQuery.offset()関数には次の制限があります。

注: jQuery は、非表示の要素のオフセット座標の取得、または body 要素に設定された境界線、マージン、またはパディングの説明をサポートしていません。

この場合の本文には 10 ピクセルの上部境界線があるため、描画が 10 ピクセルずれています。

推奨される解決策:

var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );
于 2012-08-23T18:18:05.883 に答える
5

私には2つの異なる解決策があります:

1)上記の要素の合計高さは、outerHeight(true)メソッドで計算できます。このメソッドは、マージン、パディング、ボーダーで高さを計算します。

そして、これは競合を作成せず、真の値を返します。 これが jsFiddle の例です。

html

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

jQuery

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

2)top本文に対して相対的に配置された要素に css を定義した場合、この値も使用できます。

parseInt($('#myEle').css('top'));
于 2012-08-23T08:44:46.680 に答える