jQuery可拖動並行移動多個div

我爲Javascript和jQuery問題困擾了大約兩週，這讓我瘋狂。我需要多個div在容器div內拖動。如果您移動一個格子，其他格子隨之移動，不管放在容器中的哪個位置。現在，有兩個問題：jQuery可拖動並行移動多個div

1）第一個元素被放棄罰款，它是上部lefter角捕捉鼠標指針，但這是好的。但是當放下更多div時，它們在y軸上的正確位置有一個偏移量。不是X軸，這是有效的。有趣的是，偏移量正好是紅色div的高度，50像素。第三個下降的div則有100個像素的偏移量，第四個150像素等等。

2）當拖動一個div時，其他人在x和y座標上得到一個我無法解釋的偏移量。

看一看：http://jsfiddle.net/6v3hR/7/

我包括鼠標指針的位置，這使得易於調試/位置檢查。由於問題2）在啓動功能中發生，我將座標輸出到控制檯。而且他們是正確的！您可以使用鼠標指針到相應位置並檢查顯示的座標對來檢查。

代碼解釋：

  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容器，開始被調用。在這裏，我保存在開始的位置，所以原來的位置，因此名稱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功能的每一個功能更新所有div的位置。這實際上工作得很好，痛苦的抵消在那裏，但運動是真正平行的。

有一個pluging，multidraggable。它非常好，但它不適用於最近的jQuery 1.9+版本。

任何幫助都是非常讚賞。

來源

2013-07-28 user2627480

我可以仔細看看，但我的第一個建議是不計算jQuery的偏移量。這絕對應該用CSS來完成。由於90％的jQuery是爲了實現這一目標，所以我會說你真的在這裏過分複雜。

來源

2013-07-28 12:56:39

好吧，我明白了。通過試驗和錯誤，我不知道爲什麼這是解決方案。問題是，CSS函數沒有做到預期的那樣。我用偏移功能取代了css功能，現在它就像一個魅力。通過使用ui.offset信息，divs現在也不會隨着鼠標左上角跳到鼠標指針，而是完全停留在丟棄的位置。無論如何謝謝瑞恩！更新的版本：http://jsfiddle.net/6v3hR/8/ – user2627480

jQuery可拖動並行移動多個div

回答

相關問題