我有一个带有可拖动行的表的工作示例。我可以在行之间进行转换，这很好，但只要一个表中没有子节点，表就无法接受子节点。
http://jsfiddle.net/yf47u/264/
HTML
<table id='table-draggable1'>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody class="connectedSortable">
<tr>
<td>156</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>256</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
</tbody>
</table>
<table id='table-draggable2'>
<thead>
<tr>
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
</tr>
</thead>
<tbody class="connectedSortable">
<tr>
<td>356</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>456</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
</tbody>
</table>
的Javascript
$(document).ready(function() {
$( "tbody.connectedSortable" )
.sortable({
connectWith: ".connectedSortable",
items: "tr",
helper:"clone",
zIndex: 999990
})
});
当所有孩子都离开时，有没有办法让可分拣区更大？我希望能够将新行放入空表中;行也必须附加在<tbody>
答案 0 :(得分：0)
如下所示，请更改Html和Jquery，这对我来说很好。
<强> HTML
<table id='table-draggable1' class="connectedSortable">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody >
<tr>
<td>156</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>256</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
</tbody>
</table>
<table id='table-draggable2' class="connectedSortable">
<thead>
<tr>
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
</tr>
</thead>
<tbody >
<tr>
<td>356</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>456</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
</tbody>
</table>
<强> Jquery的
$(document).ready(function() {
$( "#table-draggable1,#table-draggable2" )
.sortable({
connectWith: ".connectedSortable",
items: "tbody > tr"
})
});
查看Jsfiddle链接