從一個選項卡表拖放錶行到另一個選項卡表 - jquery

Question

我有兩個選項卡（使用boostrap構建），每個選項卡都有自己的表。

我需要從一個選項卡拖動錶行並放入另一個選項卡表。拖動時，我想在放入表格之前打開光標下的選項卡。任何幫助讚賞。

這是我的HTML代碼

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

這是我的JS代碼

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

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

Answer 1

這裏是一個融合jQueryUI的解決方案可棄與排序，以滿足您的要求：

$(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"); 
     } 
    }); 
}); 

編輯：編輯：Link to jsfiddle