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.

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

I found few jsfiddle links

$("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.

回答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>

回答2:

It seems I don't have enough reputation to leave a comment, so here is my addition to the previous answer (which is 100% correct). First of all, to update a DB, see this. For anyone uninitiated into jquery, you must reference both jquery and jquery.ui to make this work. And you must reference jquery first because jquery.ui references the other. To put it all together, here is a template that you can use to drag and drop contents from the jsfiddle link.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
<!--- insert jquery code from JSFIDDLE here --->
</script>
<style>
<!--- insert CSS code from JSFIDDLE here --->
</style>
<!--- insert HTML code from JSFIDDLE here --->

来源：https://stackoverflow.com/questions/22437946/drag-and-drop-of-table-rows-between-two-similar-table-in-jquery-with-draggable-a

标签

jquery

drag-and-drop

tablerow