将表行从一个选项卡表拖放到另一个选项卡表 - Jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14907809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drag and drop table row from one tabs table to another tabs table - Jquery
提问by Suriyan Suresh
I have two tabs(built using boostrap) and each tab has its own table.
我有两个选项卡（使用 boostrap 构建），每个选项卡都有自己的表格。
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
这是我的 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>
This is my JS code
这是我的JS代码
$('.table-draggable1 tbody').draggable();
$('#my-tabs > li').droppable({
over:function(event, ui){
console.log(event.target);
},
drop:function(event,ui){
}
});
回答by marty
Here is a solution that combines jqueryUI droppable with sortable to satisfy your requirement:
这是一个结合了 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");
}
});
});
EDIT:Link to jsfiddle
编辑：链接到 jsfiddle
回答by DUzun
I've found a jQuery plugin that does the job: TableDnD
我找到了一个可以完成这项工作的 jQuery 插件： TableDnD
For bootstrap, there is bootstrap-tablewhich uses this jQuery plugin for table rows reordering.
对于引导程序，有使用此 jQuery 插件进行表行重新排序的引导表。
