jQuery极限排序父表行排序

Question

所以我有一个表有几个类别，每个类别下面有几个项目。

喜欢的东西：

<tr> 
<td>Category1</td> 
</tr> 
<tr> 
    <td>Item1<td> 
</tr> 
<tr> 
    <td>Item2</td> 
</tr> 
<tr> 
    <td>Item3</td> 
</tr> 
<tr> 
    <td>Category2</td> 
</tr> 
<tr> 
    <td>item1</td> 
</tr> 

我希望能够仅在其类别中每一个“项目”进行排序。因此，“category2”内的“item1”不应该被拖到“category1”。不太确定如何实现这一点。

Answer 1

你可以实现jQuery UI的可排序交互来实现你的需求。下面是一个工作示例：

<style type="text/css"> 
    .isSortable { list-style-type: none; margin: 10px; padding: 5px; width: 60%; } 
    .isSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } 
    html>body .isSortable li { height: 1.5em; line-height: 1.2em; } 

</style> 

<ul id="category1" class="isSortable" style="border:1px solid blue;"> 
    <li class="ui-state-default">item1</li> 
    <li class="ui-state-default">item2</li> 
    <li class="ui-state-default">item3</li> 
</ul> 

<ul id="category2" class="isSortable" style="border:1px solid red;"> 
    <li class="ui-state-default">item1</li> 
    <li class="ui-state-default">item2</li> 
    <li class="ui-state-default">item3</li> 
</ul> 

<script type="text/javascript"> 

    $('ul.isSortable').each(function(){ 
     $(this).sortable({ 
      connectWith : $(this).attr('id') 
     }) 
    }); 

</script> 

编辑：

下面的代码应该实现您的要求：

<style type="text/css"> 
    .isSortable { list-style-type: none; margin: 10px; padding: 5px; width: 60%; } 
    .isSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } 
    html>body .isSortable li { height: 1.5em; line-height: 1.2em; } 

</style> 

<ul class="isSortableBlock"> 
    <li> 
     <span>Category</span> 
     <ul id="category1" class="isSortable" style="border:1px solid blue;"> 
     <li class="ui-state-default">item1</li> 
     <li class="ui-state-default">item2</li> 
     <li class="ui-state-default">item3</li> 
     </ul> 
    </li> 
    <li> 
     <span>Category 2</span> 
     <ul id="category2" class="isSortable" style="border:1px solid blue;"> 
     <li class="ui-state-default">item1</li> 
     <li class="ui-state-default">item2</li> 
     <li class="ui-state-default">item3</li> 
     </ul> 
    </li> 
</ul> 

<script type="text/javascript"> 

    $('ul.isSortableBlock').sortable(); 

    $('ul.isSortable').each(function(){ 
    $(this).sortable({ 
    connectWith : $(this).attr('id') 
    }) 
    }); 

</script> 

我还更新了相同的链接http://jsfiddle.net/sKnLR/8/