相互綁定多個jquery ui元素

Question

是否可以設置一組多個jquery ui元素來全部響應與該組中任何一個的交互？

編輯：例如，我有幾個版本的非常相似的圖像，我使用jquery.tabs（）將它們分組到不同的頁面中。 圖像都可以使用各種jQuery UI物件（可拖動，可調整大小等）進行操作。 除了圖像的路徑以外，我所有的選項卡都應該看起來相同。 因此，當我在一個選項卡中拖動圖像或調整圖像大小時，我希望其他選項卡中的相應圖像也能執行相同的操作。

Answer 1

例如使用$('#element1').add($('#element2).draggable();

但是如果要在拖動element2時拖動element1：由於在拖動過程中，該元素獲得了一類ui-draggable-dragging use：

if($('#element1')).hasClass('ui-draggable-dragging')){
  //drag #element2
}

Answer 2

您可以通過使用UI對象提供的事件draggable()例如drag for draggable()來完成您想做的事情：

示例： http ： //jsfiddle.net/elclanrs/WcNNb/2/

$('#drag1').draggable();
$('#drag2').draggable({
    drag: function(){
        $('#drag1').offset({
            top: $(this).offset().top,
            left: $(this).offset().left - $('#drag1').width() - 20
        });
    }
});

Answer 3

讓我們假設相似的元素具有相同的類名，例如`class =“ elementType_n”。

然后，您可以選擇所有相似的元素，然后按一個或依次對其進行操作，如下所示：

javascript：

$selection_n = $(".elementType_n");
$selection_n.on('eventType', function(){
    //Here, depending on the action, either
    //* act on $selection_n all together, eg. $selection_n.methodA(...)..methodB(...);
    // or
    //* act on $(this) with eg. $(this).methodA(...)..methodB(...); then use $(this)'s resulting properties to act on the rest of the selection, eg. $selection_n.not($(this).methodA(...)..methodB(...);
});

對於可拖動對象，毫無意義地將隱藏元素拖動到可見的拖動元素上。 誰會看到他們移動？ 而是建立一個drag.oncomplete處理程序，以設置不可見對象的偏移量以匹配被拖動元素的偏移量。 最終結果-相同。 效率-更高。 （可拖放是另一回事）。