jquery - 使用可拖动和可拖放的方式在jquery中的两个相似表之间拖放表行

我正在尝试将表格行拖放到相似的表格中，即具有相同的表格结构。

我正在尝试使用j查询可拖动山墙实现，但无法修复它。

我发现了几个jsfiddle链接

$("tbody.connectedSortable")
    .sortable({
        connectWith: ".connectedSortable",
        items: "> tr:not(:first)",
        appendTo: $tabs,
        helper: "clone",
        zIndex: 999990,
        start: function () {
            $tabs.addClass("dragging")
        },
        stop: function () {
            $tabs.removeClass("dragging")
        }
    })

但是这里我没有其他表格的标签。

最佳答案

JS FIDDLE

jQuery的

var $tabs = $('#table-draggable2')
$("tbody.connectedSortable")
    .sortable({
        connectWith: ".connectedSortable",
        items: "> tr:not(:first)",
        appendTo: $tabs,
        helper: "clone",
        zIndex: 999990
    })
    .disableSelection();
var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".connectedSortable tr",
    hoverClass: "ui-state-hover",
    drop: function (event, ui) {
        return false;
    }
});

的HTML

<table id='table-draggable1'>
   <tbody class="connectedSortable">
      <tr>
         <th>col1</th>
         <th>col2</th>
         <th>col3</th>
         <th>col4</th>
      </tr>
      <tr>
         <td>156</td>
         <td>668</td>
         <td>100.95</td>
         <td>1.82</td>
      </tr>
      <tr>
         <td>256</td>
         <td>668</td>
         <td>100.95</td>
         <td>1.82</td>
      </tr>
   </tbody>
</table>
<table id='table-draggable2'>
   <tbody class="connectedSortable">
      <tr>
         <th>COL1</th>
         <th>COL2</th>
         <th>COL3</th>
         <th>COL4</th>
      </tr>
      <tr>
         <td>356</td>
         <td>668</td>
         <td>100.95</td>
         <td>1.82</td>
      </tr>
      <tr>
         <td>456</td>
         <td>668</td>
         <td>100.95</td>
         <td>1.82</td>
      </tr>
   </tbody>
</table>