Faites glisser et déposez une ligne de tableau d'une table d'onglets à une autre table d'onglets - Jquery

J'ai deux onglets(construit à l'aide de bootstrap) et chaque onglet possède sa propre table.

J'ai besoin pour faire glisser la ligne de tableau à partir d'un onglet et le déposer dans un autre onglet de la table. Tout en faisant glisser je veux ouvrir l'onglet sous le curseur avant de tomber dans la table. Toute aide appréciée.

C'est mon code 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>

C'est mon code JS

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

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

source d'informationauteur Suriyan Suresh

  1. 24

    Voici une solution qui combine jqueryUI droppable avec sortable pour satisfaire votre exigence:

    $(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: Lien vers le jsfiddle