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();

这是一个小提琴来说明：demo

另一个选择是完全忽略sortables并改为使用draggable和droppable控件。您必须使用这些控件的“拖动”和“拖放”事件手动更改DOM。

在可拖动的JQuery Sortable表的列中创建单个项目，而不在其他列中移动项目

1 个答案: