当表格中没有元素时，可排序停止工作？答案

【问题标题】：Sortable stops working when no elements left in the table?当表格中没有元素时，可排序停止工作？
【发布时间】：2015-02-03 15:25:55
【问题描述】：

我有一个带有可拖动行的表格的工作示例。我可以在行之间转移，这很好，但是一旦一个表中没有子表，该表就无法接受子表。

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>

【问题讨论】：

可能的快速修复：在表格中添加一个字段但设置display: none
但是我仍然可以在它下面移动东西，这是我不想要的。如果底部有一个字段，它需要留在底部。有没有办法让最后一个字段始终处于底部？
jquery 的 sortable 似乎没有 prependTo 选项。这意味着新移动的元素将追加到末尾，因此将现有元素向上移动。最新移动的元素将位于底部。我认为其中一个事件回调是您应该寻找可能重新排序或阻止追加和前置的地方。
就美学而言，我不希望用户可以在空白行下方放置一行。通过回调，我只能想象用户删除行然后对事物进行排序......但从美学上讲这并不理想

标签： jquery jquery-ui drag-and-drop jquery-ui-sortable

【解决方案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 链接

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

【讨论】：

只有当我将style="min-height: 50px" 添加到表中时，这才对我有用。你也可以做出这样的风格table.draggable-zone { min-height: 50px; }。