jQuery UI - ドラッグ可能と組み合わせる

Question

私はjQuery UIのSelectableとDraggableの機能をドラッグアンドドロップインターフェイスに組み合わせて、複数のdivsを選択してこれらのdivを移動できるようにしていますjQuery Droppables。ここで

は、私は、ユーザーがテーブルの行全体のdiv要素を選択することができるようにする必要があり、コードは次のとおりです。

$('tr').selectable({ 
     filter: 'div', 
     selected: function(event, ui) { 
      $(ui.selected).draggable({ 
       containment: 'document', 
       axis: 'y', 
       snap: true, 
       snapMode: 'inner', 
       revert: 'invalid', 
       opacity: 0.8, 
       drag: function(e, ui) { 
        $('.ui-selected').css({ 
         top : ui.position.top //Y-Axis Only 
        }); 
        $('.ui-selected').addClass('ui-draggable-dragging'); 
       }, 
       stop: function() { 
        $('.ui-selected').removeClass('ui-selected ui-draggable'); 
       } 
      }); 
     } 
    }); 

あなたが見ることができるように、私はjQueryのUIの要素に追加されます知られているクラスを追加しようとしましたドラッグ/選択された/等であるが、実際のドラッグ可能と思われる唯一の要素は、ユーザがクリックした（実際にドラッグしている）ものである。

私の願望は、ユーザーが全体選択したグループをドラッグして持っている、そしてそれらをdraggablesなど、すべての行為（すなわち：など、ドロップ可能にスナップ、無効に戻す）を持つことで、誰もがこれを行うにはどのように任意のアイデアを持っています

どこから行くの？

また、ここにはjsfiddleがあります。正確には何を意味しているのですか（そしては現在です）。テーブルセルの幅がすべて同じになるように、結果ビューのサイズを変更する必要があります。

Answer 1

動作をシミュレートします。 （、カスタムスタイルを追加、などなどのチェックボックス）を手動で選択したとして

1. 複数の項目を選択
   はちょうどそれらをマーク
2. これは個々の項目を非表示になりますカスタムクローンhelper : function(){ return "<p>custom item</p>" }, を定義するために使用するドラッグ可能なオプションhelperをドラッグするとき。そして、必要に応じてカスタマイズすることができます。
3. これらの選択された項目を使用して適切な場所に追加するカスタムドロップの実装。