Drag and drop table row from one tabs table to another tabs table - Jquery
Here is a solution that combines jqueryUI droppable with sortable to satisfy your requirement:
$(document).ready(function() {
$tabs = $(".tabbable");
$('.nav-tabs a').click(function(e) {
e.preventDefault();
$(this).tab('show');
})
$( "tbody.connectedSortable" ).sortable({
connectWith: ".connectedSortable",
items: "> tr:not(:first)",
appendTo: $tabs,
helper:"clone",
zIndex: 99999,
start: function(){ $tabs.addClass("dragging") },
stop: function(){ $tabs.removeClass("dragging") }
});
var $tab_items = $( "ul:first > li", $tabs ).droppable({
accept: ".connectedSortable tr",
hoverClass: "ui-state-hover",
over: function( event, ui ) {
var $item = $( this );
$item.find("a").tab("show");
}
});
});
EDIT: Link to jsfiddle