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

为

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

，它应该是可能的只选择class =“sortable-row”的项目;但是再一次，我对语法感到不知所措。

Answer 1

这应该工作：

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

Answer 2

对于此标记：

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

将移动台不能移动头部分的唯一主体内容。

Answer 3

这为我工作：

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