我有两个选项卡(使用boostrap构建),每个选项卡都有自己的表.
我需要从一个选项卡拖动表行并放入另一个选项卡表.拖动时,我想在光标上打开标签,然后放入表格.任何帮助赞赏.
<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");
}
});
});
