Question

我想对具有可重排序列的两个表之间的行实施拖放操作。

我创建了一个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或其他库是否可以解决该问题？

jQuery在具有不同列顺序的表之间进行拖放

0 个答案: