0

私はjQuery UI Draggableを使用しており、ユーザーがドラッグできるさまざまなポイントがあり、すべてのポイントの上/左の位置が下のそれぞれの結果divに表示されます(これは、各ポイントの元の開始位置のいずれかを表示します移動されていないか、移動されている場合は各ポイントの最終位置)。以下のようなHTML

<div id="container">
<div id="point1"></div>
<div id="point2"></div>
<div id="point3"></div> etc
</div>

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div> etc

次のコードがありますが、効率を高めるために、以下の同じ関数を使用して各ポイントの結果を表示する必要があります。現在、point1/result1 の位置を表示するのに問題なく動作していますが、関数を毎回単純にコピー/貼り付けすることなく、result2、result3 などを表示するように適応させる方法について頭が固まりました!

$(document).ready(function() {

var coord = function(element) {
element = $(element);
var top = element.position().top;
var left = element.position().left;
$('#result1').text('White box: Left: ' + left + 'px ' + 'Top: ' + top + 'px');
}


$('#point1').draggable({cursor: "move", cursorAt: { top: 5, left: 5 }, containment: "#container", scroll: false,
create: function() {
    coord('#point1');
},
start: function() {
    coord('#point1');
},
stop: function() {
    coord('#point1');
}
});

#point1 div の代わりにコンテナー内のすべてのポイントに子セレクターを使用できることはわかっていますが、毎回再利用したいのはその上の関数です (そして、それらの値のそれぞれを取得して処理を行うことができます)。その後）。

4

1 に答える 1

1

私はjQueryを初めて使用しますが、最近あなたがしていることとまったく同じように遊んでいます。クラスをDIVに割り当てることで問題を回避しました。1 つはドラッグ可能な要素用で、もう 1 つはドロップ可能な要素用です。次に、クラスのイベントを宣言するだけです。

あなたが次のものを持っていると仮定します...

<div id="point1" class="point"></div>
...
<div id="result1" class="result"></div>


$( ".point" ).draggable();
$( ".result" ).droppable();

次に、各動作に応じて汎用関数を割り当てることができます。

これが役立つことを願っています。

于 2013-01-16T14:43:23.733 に答える