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/