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

Question

I have two tables which are next to each other. Here is a short example of template:

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

So it looks like that:

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

My goal is to use sortable jquery-ui feature to sort by drag and drop rows of both tables in the same time. In other words - when user clicks for example cell from tabel1 then the whole row

|a1|a1|a2|a2|

should be draged and then droped while mouse up. I don't need to drag and drop rows between two tables - I need rows from two tables to be treated as one row while dragging - if this rows have the same position Y in its table.

Actually, the use case is that I have grid where I need to implement drag and drop rows. User can freeze some columns of the grid - then there are 2 tables- one for freezed columns and one for unfreezed - so there is actually one row but divided into 2 table. Here is an example of grid: https://www.igniteui.com/grid/column-fixing

Answer 1

There is not a good way to accomplish this. This also gets more difficult if you have a larger number of items. Basically, you perform sort on one table, and then when the sort is complete, move the corresponding item to the proper location in the second 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

Adjusted the update logic to work better. Moving an item multiple times now fixed.

---

This works pretty well on the first go, yet starts to encounter issues with other sorts. I do not see a benefit to aligning two tables like this, for use with Sortable. You may want to consider if this is a necessary feature versus the sort function already built into your grid plugin.

Hope that helps.