如何使用可排序的jqueryui功能通过同时拖放两个表中的行进行排序

Question

我有两个紧挨着的表。以下是模板的一个简短示例：

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

我的目标是使用可排序的jqueryui功能，通过同时拖放两个表的行进行排序。换句话说，当用户点击例如表格1中的单元格时，整个行的

|a1|a1|a2|a2|

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

实际上，用例是我有一个网格，我需要在其中实现拖放行。用户可以冻结网格中的一些列，然后有两个表——一个用于冻结的列，一个用于未冻结的列——所以实际上只有一行，但分为两个表。以下是网格示例：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>

---

更新

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

---

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

希望能有所帮助。