将表行从一个选项卡表拖放到另一个选项卡表 - Jquery [英] Drag and drop table row from one tabs table to another tabs table - Jquery

问题描述

我有两个选项卡（使用boostrap构建），每个选项卡都有自己的表。

我需要从一个标签拖动表格行，并放入另一个标签表。拖动时，我想在光标上打开标签，然后放入表格。任何帮助赞赏。

这是我的HTML代码

  div class =tabbable> 
< ul class =nav nav-tabsid =my-tabs> 
< li class =active>< a href =＃tab1data-toggle =tab> Tab1< / a>< / li> 
< li class =>< a href =＃tab2data-toggle =tab> Tab2< / a>< / li> 
< / ul> 
< / div> 
 
< div class =tab-content> 
< div class =tab-pane activeid =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-paneid =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 = $（ tab（tab）; 
 $（'。nav-tabs a'）。click（function（e）{
 e.preventDefault（）; 
 $（this） ）; 
}）
 
 $（tbody.connectedSortable）.sortable（{
 connectWith：.connectedSortable，
 items：> tr： 
 appendTo：$ tabs，
 helper：clone，
 zIndex：99999，
 start：function（）{$ tabs.addClass（拖动）}，
 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）; 
} 
}）; 
}）; 
  

编辑： 链接到jsfiddle

I have two tabs(built using boostrap) and each tab has its own table.

I need to drag table row from one tab and drop into another tabs table. While dragging i want to open the tab under cursor before dropping into table. Any help appreciated.

This is my 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>

This is my JS code

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

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

解决方案

Here is a solution that combines jqueryUI droppable with sortable to satisfy your requirement:

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

这篇关于将表行从一个选项卡表拖放到另一个选项卡表 - Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！