如何使用可排序的jquery-ui功能同時對兩個表中的行進行拖放排序？

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|

我的目標是使用可排序的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> 

---

更新

調整了update邏輯以更好地工作。 現在可以多次移動項目。

---

初次使用時效果不錯，但開始遇到其他種類的問題。 對於將兩個表對齊以與Sortable一起使用，我看不出任何好處。 您可能要考慮這是否是必需功能，而不是網格插件中已內置的排序功能。

希望能有所幫助。