jQuery UI 可按固定行排序

Question

我正在使用带有表格的可排序 jQuery UI（工作正常）。我想让标题和最后一行固定（不可移动）。

jQuery UI 文档表明这可以使用项目选择器来完成，但我对语法感到困惑。

这是相关代码：

<script type="text/javascript">
    $(function () {
    $("#response_options tbody.content").sortable();
    $("#response_options tbody.content").disableSelection();
});
</script>

<table id="response_options" class="data-table">
    <tbody class="content">
        <tr>
            <th>Links</th><th>Response</th>
        </tr>
        <tr class="sortable-row">
           <td>Edit</td>
           <td>Item 1</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 2</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 3</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 4</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 5</td>
        </tr>
        <tr>
            <td>Edit</td>
            <td>Item 1</td>
        </tr>
    </tbody>
</table>

选择器进入 .sortable(...):

$("#response_options tbody.content").sortable();

as

$("#response_options tbody.content").sortable( items: ??? );

并且应该可以仅选择 class="sortable-row" 的项目；但我再次对语法感到困惑。

Answer 1

这应该有效：

$("#response_options tbody.content").sortable({items: 'tr.sortable-row'});

Answer 2

这对我有用：

        jQuery(".sortable tbody").sortable({
            items: 'tr:not(:first)'
        });

Answer 3

对于此标记：

<table id="tableid">
    <thead>
        <tr>    
            <th>namr</th>
            <th>id</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>jagadeesh</td>
            <td>1</td>
        </tr>
        <tr>
            <td>jagadeesh</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

使用此 jQuery：

$('#tableid tbody').sortable();

它将仅移动表格的正文内容，而无法移动标题部分。