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

前端之家收集整理的这篇文章主要介绍了将表行从一个选项卡表拖放到另一个选项卡表 – Jquery前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个选项卡(使用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){            
 }    
});

解决方法

这是一个解决方案,结合了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: 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

原文链接:https://www.f2er.com/jquery/176236.html

猜你在找的jQuery相关文章