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