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/中对其进行了更新