如何使用 sortable 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|

我的目标是使用 sortable jquery-ui 功能同时拖放两个 table 的行进行排序。换句话说 - 当用户点击例如来自 tabel1 的单元格时，整行

|a1|a1|a2|a2|

应该在鼠标松开时拖动然后放下。 我不需要在两个 tables 之间拖放行 - 我需要来自两个 tables 的行在拖动时被视为一行 - 如果此行在其 table.

中具有相同的位置 Y
实际上，用例是我有一个网格，我需要在其中实现拖放行。用户可以冻结网格的某些列 - 然后有 2 tables - 一个用于冻结列，一个用于未冻结列 - 所以实际上有一行但分为 2 table。这是网格的示例： https://www.igniteui.com/grid/column-fixing

Answer 1

没有很好的方法来完成这个。如果您有更多的项目，这也会变得更加困难。基本上，您对一个 table 执行排序，然后当排序完成后，将相应的项目移动到第二个 table.

中的适当位置

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

更新

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

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

希望对您有所帮助。

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

How use sortable jquery-ui feature to sort by drag and drop rows from two tables in the same time?

javascript

jquery

jquery-ui

jquery-ui-sortable