Javascript/jQuery の問題に約 2 週間苦労しており、気が狂いそうになります。コンテナ div 内でドラッグできるようにするには、複数の div が必要です。1 つの div を移動すると、コンテナー内のどこにドロップされても、他の div も一緒に移動します。さて、次の 2 つの問題があります。
1）最初の要素がうまくドロップされ、左上隅がマウスポインターをスナップしますが、これは問題ありません。しかし、さらにdivをドロップすると、y軸上の正しい位置へのオフセットがあります。x軸ではなく、機能します。興味深いことに、オフセットは正確に赤の div の高さである 50 ピクセルです。3 番目にドロップされた div のオフセットは 100 ピクセル、4 番目の div は 150 ピクセルというようになります。
2) 1 つの div をドラッグすると、他の div は x 座標と y 座標の両方で説明できないオフセットを取得します。
見てください：http://jsfiddle.net/6v3hR/7/
マウス ポインターの位置を含めました。これにより、デバッグや位置の確認が容易になります。問題 2) は start 関数で発生するため、座標をコンソールに出力します。そして、彼らは正しいものです！マウスポインターをそれぞれの位置に移動し、表示された座標ペアを確認することで確認できます。
コードの説明:
start: function () {
$('.drag_inside').each(function (idx) {
$(this)[0].originalX = $(this).offset().left;
$(this)[0].originalY = $(this).offset().top;
console.log('dragging start originalX ' + idx + ' :' + $(this)[0].originalX);
});
赤い div がコンテナー div にドラッグされるたびに、start が呼び出されます。ここでは、最初の位置、つまり元の位置を保存し、originalX と originalY という名前を付けています。これを jQuery オブジェクトに入れて、ドラッグ イベント関数で便利に使用できるようにします。
drag: function (e, ui) {
var offsetY = $(this).offset().top - $(this)[0].originalY;
var offsetX = $(this).offset().left - $(this)[0].originalX;
$('.drag_inside').each(function (idx) {
$(this).css({
top: $(this)[0].originalY + offsetY,
left: $(this)[0].originalX + offsetX
});
});
}
ここでは、オフセットを計算し、css 関数を介して each 関数を介してすべての div の位置を更新します。これは実際には問題なく動作します。痛みを伴うオフセットがありますが、動きは本当に平行です。
プラグイン、マルチドラッグ可能です。これは非常に優れていますが、最近の jQuery 1.9 以降のバージョンでは機能しません。
どんな助けでも大歓迎です。