तालिका टैब को एक टैब तालिका से दूसरे टैब तालिका में खींचें और छोड़ें - Jquery

Question

मेरे पास दो टैब हैं (बूस्टरप का उपयोग करके निर्मित) और प्रत्येक टैब की अपनी तालिका होती है।

मुझे एक टैब से तालिका पंक्ति खींचने और अन्य टैब तालिका में ड्रॉप करने की आवश्यकता है। खींचते समय मैं टेबल में ड्रॉप करने से पहले कर्सर के नीचे टैब खोलना चाहता हूं। किसी भी मदद की सराहना की।

यह मेरा एचटीएमएल कोड

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

है यह यहाँ मेरी जे एस कोड

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

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

Answer 1

है एक समाधान है कि jQueryUI जोड़ती sortable साथ droppable अपने आवश्यकता को पूरा करने के लिए है:

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