多くの選択された表の行から1つのdivタグへ

Question

jQueryから選択可能なウィジェットを使用して、テーブル内の行を選択する機能を作成しました。今では、選択された行が一緒にdivタグ（多くではなく、ただ1つの大きなdiv）を形成し、ドラッグ可能でサイズ変更可能なような別の機能を追加できるようにするdivタグを作成したいと思いますか？

jsFiddle

jQuery("#wrapper>table>tbody").bind("mousedown", function(e) { 
    e.metaKey = false; 
}).selectable({ 
    filter: "td", 
    stop: function(event, ui) { 
    jQuery(".ui-selected").addClass('todiv'); 
    } 
}); 

<div id="wrapper"> 
    <table> 
    <col width="9%"> 
    <thead> 
     <tr> 
     <th colspan="2">&nbsp;</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <th rowspan="2">&nbsp;</th> 
     <td>&nbsp;</td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     </tr> 
     <tr> 
     <th rowspan="2">&nbsp;</th> 
     <td>&nbsp;</td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

table,th,tr,td { border: 1px solid black; } 

.ui-selectable .ui-selected { background-color: #a6c9e2; } 
.ui-selectable .ui-selecting { background: #FECA40; } 

.todiv { background-color: green; } 

Answer 1

あなたはちょうどそれらのクローンを作成し、このようないくつかの容器に入れることができます：

var selected = $('#wrapper .todiv'); 
$('#rowsContainer').empty().append(selected.clone()); 

しかし、彼らはテーブルの行のように見えません、あなたがのために別のスタイルを準備する必要がありますあなたがそれを望むならばそれら。

JSFiddle