Javascript jQuery将可排序限制为父表行

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

比如：

 <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>

类别1
项目1
项目2
项目3
类别2
项目1

---

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

您可以实现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>

.isSortable{列表样式类型：无；边距：10px；填充：5px；宽度：60%；}
.isSortable li{margin:0 5px 5px 5px；padding:5px；字体大小：1.2em；高度：1.5em；}
html>body.isortable li{高度：1.5em；线条高度：1.2em；}

项目1
项目2
项目3


项目1
项目2
项目3

$（'ul.isortable'）。每个（函数（）{
$（此）。可排序({
connectWith:$（this.attr（'id'））
})
});

编辑：

以下代码应实现您的要求：

<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>

.isSortable{列表样式类型：无；边距：10px；填充：5px；宽度：60%；}
.isSortable li{margin:0 5px 5px 5px；padding:5px；字体大小：1.2em；高度：1.5em；}
html>body.isortable li{高度：1.5em；线条高度：1.2em；}


类别

项目1
项目2
项目3



第2类

项目1
项目2
项目3



$（'ul.isSortableBlock'）.sortable（）；
$（'ul.isortable'）。每个（函数（）{
$（此）。可排序({
connectWith:$（this.attr（'id'））
})
});

我也在链接中更新了同样的内容

---

​

好的，这样行。在每个项目列表上方，我将显示我的类别。有没有办法使这些类别也可以排序？因此，我可以仅对该类别中的每个列表项进行排序，但也可以对类别块本身进行排序。我几乎得到了我想要的。我设法使ul的项目彼此可排序，同时也使项目可独立排序。但是，包含类别名称的div不会随ul移动。请参阅我的JSFIDLE链接：