jquery-ui - 使 JQuery Sortable 表的列中的单个项目可拖动，而无需移动其他列中的项目

Question

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

下面的代码对整行(左列和右列)进行排序，而不仅仅是右列。 JQuery UI 文档中似乎没有解决这个问题。以前有人尝试过这样做吗？

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

Answer 1

我不相信您可以使用表格单元格来做到这一点(至少我无法让它与普通的可排序项一起使用)。

不过还有另一种选择。您可以使用看起来像表格的列表，而不是使用表格。

您可以设置列的样式来定义其宽度:

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

然后您所要做的就是将可排序应用到可排序列表:

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

这里有一个 fiddle 来说明:demo

另一种选择是完全忽略可排序并使用可拖动和可放置的控件。您必须使用这些控件的“拖”和“放”事件手动更改 DOM。