将表行从一个选项卡表拖放到另一个选项卡表

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 droppable 和 sortable 结合起来的解决方案来满足您的要求：

$(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: 999990,
            start: function(){ $tabs.addClass("dragging") },
            stop: function(){ $tabs.removeClass("dragging") }
        })
        .disableSelection()
    ;
    
    var $tab_items = $( ".nav-tabs > li", $tabs ).droppable({
      accept: ".connectedSortable tr",
      hoverClass: "ui-state-hover",
      over: function( event, ui ) {
        var $item = $( this );
        $item.find("a").tab("show");
        
      },
      drop: function( event, ui ) {
        return false;
      }
    });
    
});

ul li {
    min-width: 200px;
}
.dragging li.ui-state-hover {
    min-width: 240px;
}
.dragging .ui-state-hover a {
    color:green !important;
    font-weight: bold;
}
th,td {
    text-align: right;
    padding: 2px 4px;
    border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
    cursor: move;
}
.connectedSortable tr:first-child {
    cursor: default;
}
.ui-sortable-placeholder {
    background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<div class="tabbable" > 
    <ul class="nav nav-tabs" id="my-tabs">  
        <li class="active"><a href="#tab1"> Tab1 </a></li>  
        <li class=""><a href="#tab2"> Tab2 </a></li>  
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <table id='table-draggable1'>  
                <tbody class="connectedSortable">  
                    <tr>
                        <th>col1</th>
                        <th>col2</th>  
                        <th>col3</th>  
                        <th>col4</th>  
                    </tr>
                    <tr>   
                        <td>156</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>
        <div class="tab-pane" id="tab2">
            <table id='table-draggable2'>  
                <tbody class="connectedSortable">  
                    <tr>
                        <th>COL1</th>  
                        <th>COL2</th>  
                        <th>COL3</th>  
                        <th>COL4</th>  
                    </tr>
                    <tr>   
                        <td>356</td>                                                                                         
                        <td>668</td>                                                              
                        <td>100.95</td>  
                        <td>1.82</td>                                                                  
                    </tr>  
                    <tr>  
                        <td>456</td>                                                                                         
                        <td>668</td>                                                              
                        <td>100.95</td> 
                        <td>1.82</td>                                                                
                    </tr>  
                </tbody> 
            </table> 
        </div>  
    </div>  
</div>