jQuery Drag & Drop между таблицами с различным порядком столбцов

Question

Я хочу реализовать Drag & Drop для строк между двумя таблицами, в которых есть переставляемые столбцы.

Я создал jsfiddle, который содержит две таблицы. Вы можете перетащить строки из первой во вторую таблицу. Обе таблицы имеют переставляемые столбцы. Если порядок столбцов в обеих таблицах не одинаков, значения строк после перетаскивания оказываются в неправильном столбце.

HTML:

<table id="table1" border="1">
<thead>
  <tr>
    <th>A1</th>
    <th>A2</th>
    <th>A3</th>
    <th>A4</th>
    <th>A5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>B1</td><td>B2</td><td>B3</td><td>B4</td><td>B5</td>
  </tr>
  <tr>
    <td>C1</td><td>C2</td><td>C3</td><td>C4</td><td>C5</td>
  </tr> 
</tbody>
</table>

<br>

<table id="table2" border="1">
<thead>
  <tr>
    <th>D1</th>
    <th>D2</th>
    <th>D3</th>
    <th>D4</th>
    <th>D5</th>
  </tr>
</thead>
<tbody class="sortable">
  <tr>
    <td>E1</td><td>E2</td><td>E3</td><td>E4</td><td>E5</td>
  </tr>
  <tr>
    <td>F1</td><td>F2</td><td>F3</td><td>F4</td><td>F5</td>
  </tr> 
</tbody>
</table>

JS:

 $('#table1').dragtable();

 $('#table2').dragtable();
 $('#table2 tbody').sortable({
            update: function (e, ui) {
                console.log("dropped");
            }
        });

$('#table1 tr').draggable({
  connectToSortable: ".sortable",
  helper: "clone",
  revert: "invalid"
});

https://jsfiddle.net/codetoad/2wrh3vqz/70/

Я думаю, что есть способ изменить порядок строк в DOM после отбрасывания. Но есть ли более простой способ сделать это? Может ли jQuery UI или другая библиотека справиться с этой проблемой?