CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
SigGP
SigGP

Reputation: 776

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

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

Upvotes: 0

Views: 405

Answers (1)

Twisty
Twisty

Reputation: 30883

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.

Upvotes: 1

Related Questions