0

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

SigGP
  • 716
  • 1
  • 11
  • 24
  • Possible duplicate of [Dragging rows between tables](https://stackoverflow.com/questions/27048496/dragging-rows-between-tables) – Stuart Dec 18 '18 at 15:07
  • Take a look here: https://coursesweb.net/javascript/jquery-drag-drop-rows-between-two-similar-tables_cs or here: https://codepen.io/pixeline/pen/pJRyJX – Stuart Dec 18 '18 at 15:09
  • 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. – SigGP Dec 18 '18 at 15:21
  • This can be done. First, how do you identify which in the sister table, to drag along with the selected row. Also should the reverse be true? – Twisty Dec 18 '18 at 16:41
  • I have ids of these two tables to identify them. Yes, if I drop then the new order must be set. 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 tables. – SigGP Dec 18 '18 at 16:52
  • @SigGP so it sounds like the relationship is built via table ID. If you need to freeze some rows, just disable them from Sort. I think you're making this overly complex. Also please update your example and include your current sortable code. – Twisty Dec 18 '18 at 17:20
  • Not rows are freezed but columns. Here is sample of this grid: https://www.igniteui.com/grid/column-fixing – SigGP Dec 18 '18 at 17:37

1 Answers1

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.

Twisty
  • 30,304
  • 2
  • 26
  • 45