1
DOM内に<table>要素を作成し、javascriptを使用して多数のセルを動的に追加します。説明のために、行ごとに10個のフィールドを持つ10個の行を作成してみましょう。私はシンプルなカウンターを使用して、これらのフィールド内のdivコンテナの一意のIDを割り当てています。簡単に。これは私が得るものです：jQuery UI Draggable：たくさんの動的に作成された要素のドラッグ・オフセットを取得します。
<table>
<tr><td><div id="field0"><div id="handle0"></div></div></td></tr>
.....
<tr><td><div id="field99></div id="handle99"></div></div></td></tr>
</table>
数字0~99は、各要素IDに動的に追加されるものです。私は今、先に行くと、各ハンドルにjQueryUI .draggable機能を取り付け、それぞれの座標を取得したい はそうのように周囲の各親のdivに対する扱い：
for (var counter = 0; counter < 100; counter++) {
var dragHandle = $('#handle' + counter);
var dragField = $('#field' + counter);
dragHandle.draggable({
containment: dragField,
scroll: false,
drag: function() {
var offset = $(this).offset();
var xPos = (offset.left) - $(this).offsetParent().offset().left;
var yPos = (offset.top) - $(this).offsetParent().offset().top;
console.log(xPos);
console.log(yPos); // These add up?!
}
});
}
は今、機能が動作し、テーブルが正しく取得します初期化され、テーブル内の個々のハンドルのすべてがドラッグ可能になりました。
問題は、上記関数によって返されるxPosとyPos値は各フィールドに対して正しい座標ではなく、代わりに、彼らが追加することです。
私は何かがひどく明白であることを逃しているように感じ、誰かが助けることができたら本当に感謝します。
編集：上記の例では、簡略化のためにconsole.logを使用しています。私の元のスクリプトはonドラッグイベントでより複雑な計算を実行します。クラスセレクタを使用して、コメント内で提案されたような要素のすべてを調べることはできません。ユニークな包含IDに関連した一意のハンドルIDごとに一意のオフセットと位置の値を取得する必要があるからです。
.top私はいくつかを参照してください$（この）.position（） - $（この）.positionは（）=（offset.top） するvar YPOSを.LEFTここで問題となるのは、 'offset'はオブジェクトであり、あなたはそれを文字列として記録しようとしています。また、すべてのフィールドをループしてドラッグ可能なアイテムを追加するのではなく、ドラッグ可能なアイテムを簡単に参照できるようにクラスを追加するのはなぜですか？ –
console.logエラーを修正しました。私は、各ユニークな包含IDに関連したそれぞれのユニークなハンドルIDのオフセット値にアクセスする必要があるため、クラスで作業できるとは思わない。 – RoyNeary