Ziehen Sie die Tabellenzeile aus einer Tabstopp-Tabelle in eine andere Tabstopp-Tabelle - Jquery

Question

Ich habe zwei Registerkarten (mit Boost-Funktion erstellt) und jede Registerkarte hat ihre eigene Tabelle.

Ich muss Tabellenzeile von einer Registerkarte ziehen und in eine andere Tabs-Tabelle fallen. Während des Ziehens möchte ich die Registerkarte unter dem Cursor öffnen, bevor ich in die Tabelle blättere. Jede Hilfe wird geschätzt.

Das ist mein HTML-Code

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

Das ist mein JS-Code ist

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

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

Answer 1

Hier ist eine Lösung, die jQueryUI abwerfbaren mit sortierbar verbindet Ihre Anforderung zu erfüllen:

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