将表格行从一个选项卡表拖放到另一个选项卡表 - Jquery答案

【问题标题】：Drag and drop table row from one tabs table to another tabs table - Jquery将表格行从一个选项卡表拖放到另一个选项卡表 - Jquery
【发布时间】：2013-02-16 06:52:26
【问题描述】：

我有两个标签（使用 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){            
 }    
});

【问题讨论】：

对于这个网站来说太宽泛了。但基本上你需要检测拖动的对象何时“超过”一个选项卡，打开该选项卡等......加上 dom 操作以处理将拖动的对象正确插入新位置的 dom 分支。
我试图在拖动时打开标签，但我做不到
目前这是基于您的代码的jsfiddle.net/xuWCm 小提琴，但第二个选项卡在单击时不会打开。您确定此代码包含所有内容吗？因为即使var widthFixHelper 也没有在任何地方引用。
此代码不需要widthFixHelper，感谢您指出这一点。需要为tab功能添加bootstrap css和bootstrap js

标签： jquery jquery-ui twitter-bootstrap drag-and-drop

【解决方案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: 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

【讨论】：

感谢您的回答，但我使用引导程序作为选项卡，您使用的是 jquery ui 选项卡。我可以使用 booststrap 选项卡来做到这一点吗？
@JKS，哦，是的，对不起，我忽略了您使用引导选项卡这一事实 - 我刚刚使用包含引导版本的 jsfiddle 更新了答案
这真的很酷。我有一些情况可以使用它。但是，我发现了一些错误。 Tab 1 不能完全清空，如果 Tab 2 完全清空，您将无法再将任何东西移回它。
是的，工作正常，感谢您的努力。如果我将所有行从 tab1 移动到 tab2 则会有一个错误，那么我无法将行从 tab2 拖动到 tab1 不起作用。
嗨@marty 真棒兄弟！你帮了我很多！我在几分钟内就做到了 :) 最好的问候

【解决方案2】：

我找到了一个可以完成这项工作的 jQuery 插件： TableDnD

对于引导程序，bootstrap-table 使用此 jQuery 插件对表行重新排序。

【讨论】：