Jquery ui 使JQuery可排序表的列中的单个项可以拖动，而不移动其他列中的项

我想创建一个表，该表在单个列中具有拖放可排序项，但单个列中的项的移动不会影响其他列中项的位置

下面的代码对整行（左列和右列）进行排序，而不仅仅是右列。jQueryUI文档中似乎没有提到它。以前有人试过这样做吗

<script>
  $(function() {
    $("table tbody").sortable({
        handle: '.handle'
    }).disableSelection();
  });
</script>

<table>
  <tbody id="sortable">
    <tr>
      <td>1 - Column Item I Want to Stay In Place</td>
      <td class="handle">Item 1 - The Part That Should Be Draggable/Sortable</td>
    </tr>
    <tr>
      <td>2 - Column Item I Want to Stay In Place</td>
      <td>Item 2 - The Part That Should Be Draggable/Sortable</td>
    </tr>
    <tr>
      <td>3 - Column Item I Want to Stay In Place</td>
      <td class= "handle">Item 3 - The Part That Should Be Draggable/Sortable</td>
   </tr>
 </table>

$（函数（）{
$（“表tbody”）。可排序({
句柄：'.handle'
}).disableSelection（）；
});
1-列项目我想留在原地
第1项-应可拖动/排序的零件
2列项目我想留在原地
第2项-应可拖动/排序的零件
3列项目我想留在原地
第3项-应可拖动/排序的零件

我不相信你能用表格单元格做到这一点（至少我不能用普通的排序表）

不过，还有另一种选择。您可以使用类似于表的列表，而不是使用表

可以为列设置样式以定义其宽度：

.column {
    width: 100px;
    list-style: none;
    float: left;
}

然后，将每列定义为一个列表：

<ul class="column">
    <li>Fixed 1</li>
    <li>Fixed 2</li>
</ul>
<ul class="sortable column">
    <li>Sortable 1</li>
    <li>Sortable 2</li>
</ul>
<ul class="sortable column">
    <li>Sortable 3</li>
    <li>Sortable 4</li>
</ul>

这里有一把小提琴来说明：

另一种选择是完全不考虑可排序，而是使用可拖动和可拖放控件。您必须通过使用这些控件的“拖放”事件手动更改DOM

$(".sortable").sortable();