javascript - 如何使用可排序的 jquery-ui 功能同时从两个表中拖放行进行排序？

Question

我有两张相邻的 table 。这是模板的简短示例:

<table id="table1">
    <tbody>
        <tr>
            <td>a1</td>
            <td>a1</td>
        </tr>
        <tr>
            <td>b1</td>
            <td>b1</td>
        </tr>
    </tbody>
</table>
<table id="table2">
    <tbody>
        <tr>
            <td>a2</td>
            <td>a2</td>
        </tr>
        <tr>
            <td>b2</td>
            <td>b2/td>
        </tr>
    </tbody>
</table>

所以看起来像这样:

|a1|a1|a2|a2|
|b1|b1|b2|b2|

我的目标是使用可排序的 jquery-ui 功能通过同时拖放两个表的行进行排序。换句话说 - 当用户单击 tabel1 中的示例单元格时，则单击整行

|a1|a1|a2|a2|

应该在鼠标悬停时拖动然后放下。 我不需要在两个表之间拖放行 - 我需要在拖动时将两个表中的行视为一行 - 如果这些行具有相同的位置Y 在其表中。

实际上，用例是我需要在网格中实现拖放行。用户可以卡住网格的某些列 - 然后有 2 个表 - 一张用于卡住列，一张用于未卡住 - 因此实际上有一行，但分为 2 个表。这是网格的示例: https://www.igniteui.com/grid/column-fixing

Answer 1

没有一个好的方法可以实现这一点。如果您有大量元素，这也会变得更加困难。基本上，您对一个表执行排序，然后当排序完成时，将相应的项目移动到第二个表中的正确位置。

$(function() {
  $("#table1 tbody").sortable({
    handle: ".row-handle",
    items: "> tr",
    helper: function(e, item) {
      var index = item.index();
      item.data("right", $("#table2 tbody tr:eq(" + index + ")").clone());
      item.data("orig-index", index);
      $("#table2 tbody tr:eq(" + index + ")").fadeOut("fast");
      return item;
    },
    update: function(e, ui) {
      var row2 = ui.item.data("right");
      var index = ui.item.index();
      $("#table2 tbody tr").eq(ui.item.data("orig-index")).remove();
      switch (true) {
        case index == 0:
          console.log("First", index);
          $("#table2 tbody tr:eq(0)").before(row2);
          break;
        case index == $("#table2 tr").length:
          console.log("Last", index);
          $("#table2 tbody").append(row2);
          break;
        case index > 0 && index < $("#table2 tr").length:
          console.log("Mid", index);
          $("#table2 tbody tr").eq(index).before(row2);
      }
    }
  });
});

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="table1" class="left ui-widget">
  <thead class="ui-widget-header">
    <tr>
      <td style="width: 20px;">&nbsp;</td>
      <th>Company</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody class="ui-widget-content">
    <tr>
      <td style="width: 20px;"><span class="ui-icon ui-icon-grip-dotted-vertical row-handle"></span></td>
      <td>Company 1</td>
      <td>Name 1</td>
    </tr>
    <tr>
      <td><span class="ui-icon ui-icon-grip-dotted-vertical row-handle"></span></td>
      <td>Company 2</td>
      <td>Name 2</td>
    </tr>
    <tr>
      <td><span class="ui-icon ui-icon-grip-dotted-vertical row-handle"></span></td>
      <td>Company 3</td>
      <td>Name 3</td>
    </tr>
  </tbody>
</table>
<table id="table2" class="right ui-widget">
  <thead class="ui-widget-header">
    <tr>
      <th>Title</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
      <td>Address 1</td>
    </tr>
    <tr>
      <td>Title 2</td>
      <td>Address 2</td>
    </tr>
    <tr>
      <td>Title 3</td>
      <td>Address 3</td>
    </tr>
  </tbody>
</table>

<小时/>

更新

调整了更新逻辑以更好地工作。多次移动项目现已修复。

<小时/>

这在第一次运行时效果很好，但开始遇到其他类型的问题。我没有看到像这样对齐两个表与可排序一起使用有什么好处。您可能需要考虑与网格插件中已内置的排序功能相比，这是否是必要的功能。

希望有帮助。