CODEWITHSUNDEEP
jquerydrag-and-droptablerow
user3425823
user3425823

Reputation: 31

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.

Upvotes: 3

Views: 9789

Answers (2)

Quickmute
Quickmute

Reputation: 1723

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

Upvotes: 1

Nikhil Mittal
Nikhil Mittal

Reputation: 440

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>

Upvotes: 10

Related Questions