使用draggable和droppable在jquery中的两个相似表之间拖放表行 [英] drag and drop of table rows between two similar table in jquery with draggable and droppable

问题描述

我正在尝试拖动一个表行并将其放在类似的表中，即具有相同的表结构。

I am trying to drag a table row and to drop it in the similar table i.e, of same table structure.

我试图用j查询拖动来实现-gable但无法修复它。

I am trying to implement with j query drag-gable but not able to fix it.

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

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

but here i dont have a tab for other table.

推荐答案

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>

这篇关于使用draggable和droppable在jquery中的两个相似表之间拖放表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！