Kéo và thả hàng của bảng từ một bảng tab sang bảng tab khác - Jquery

Question

Tôi có hai tab (được xây dựng bằng cách sử dụng bộ tăng cường) và mỗi tab có bảng riêng.

Tôi cần kéo hàng của bảng từ một tab và thả vào bảng tab khác. Trong khi kéo tôi muốn mở tab dưới con trỏ trước khi thả vào bảng. Bất kỳ trợ giúp nào được đánh giá cao.

Đây là HTML của tôi đang

<div class="tabbable" > 
    <ul class="nav nav-tabs" id="my-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab"> Tab1 </a></li> 
    <li class=""><a href="#tab2" data-toggle="tab"> Tab2 </a></li> 
</ul> 
</div> 

<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
    <table id='table-draggable1'> 
    <thead> 
    <th>col1</th> 
    <th>col2</th> 
    <th>col3</th> 
    <th>col4</th> 
    </thead> 
<tbody> 
    <tr> 
    <td>256</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> 
<div class="tab-pane" id="tab2"> 
    <table id='table-draggable2'> 
    <thead> 
    <th>col1</th> 
    <th>col2</th> 
    <th>col3</th> 
    <th>col4</th> 
    </thead> 
<tbody> 
    <tr> 
    <td>256</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> 

</div> 

Đây là mã JS của tôi

$('.table-draggable1 tbody').draggable(); 

$('#my-tabs > li').droppable({ 
    over:function(event, ui){    
    console.log(event.target);    
}, 
    drop:function(event,ui){    
}  
}); 

Answer 1

Dưới đây là một giải pháp kết hợp jQueryUI droppable với sắp xếp được để đáp ứng yêu cầu của bạn:

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