複数のjquery要素を互いにバインドする

Question

複数のjquery UI要素のグループを、グループ内のいずれの要素とのやりとりにもすべて対応できるように設定できますか？

編集： たとえば、私はjquery.tabs（）で別のページにグループ化した非常に似た画像のいくつかのバージョンがあります。画像は、さまざまなjquery UIのオブジェクト（ドラッグ可能、サイズ変更可能など）ですべて操作可能です。画像へのパスを除いて、すべてのタブが同じに見えるはずです。そのため、1つのタブで画像をドラッグまたはサイズ変更すると、他のタブの対応する画像も同じようになります。

Answer 1

何があなたがやりたいUIオブジェクトは、このようなdraggable()ためdragとして提供するイベントを使用することによって達成することができます。

例：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 2

例えば使用：$('#element1').add($('#element2).draggable();

いますが、要素2がドラッグされたときに要素1ドラッグする場合： 中の要素は、UI-ドラッグドラッグ使用のクラスを取得ドラッグ以来：

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

Answer 3

のは、同様の要素が共通のクラス名、例えば `クラス=「elementType_n」を持っていることを前提にしてみましょう。次のように

次に、あなたは、すべて同様の要素を選択し、1として、または順序でそれらに基づいて行動することができます

のjavascript：

draggablesについては

$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ハンドラを設定して、不可視のオフセットをドラッグして要素のオフセットと一致するように設定します。最終結果 - 同一。効率性 - それ以上。 （Droppableは別の問題です）。