使用draggable和droppable在jquery中的两个相似表之间拖放表行

Question

我试图拖动一个表行并将其放在类似的表中,即相同的表结构.

我试图用j查询drag-gable实现,但无法修复它.

我发现很少有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")
        }
    })

但在这里我没有其他桌子的标签.

Answer 1

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>