当 table 中没有剩余元素时，Sortable 停止工作？

Question

我有一个 table 的工作示例，其中包含可拖动的行。我可以在行之间转移，这很好，但是一旦 table 中没有 children，table 就无法接受 children.

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
    })
});

有没有办法在所有 children 离开时使 sortable 区域变大？我希望能够将新行放入空 tables；行也必须附加在 <tbody>

内

Answer 1

请如下所示更改 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 link

http://jsfiddle.net/yf47u/274/