3

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

下面的代码对整行（左列和右列）进行排序，而不仅仅是右列。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>
4

1 回答 1

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

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

于 2014-01-24T01:32:29.700 回答