本文介绍了使用draggable和droppable在jquery中的两个相似表之间拖放表行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试拖动一个表行并将其放在类似的表中,即具有相同的表结构。
I am trying to drag a table row and to drop it in the similar table i.e, of same table structure.
我试图用j查询拖动来实现-gable但无法修复它。
I am trying to implement with j query drag-gable but not able to fix it.
我发现很少有链接
$("tbody.connectedSortable")
.sortable({
connectWith: ".connectedSortable",
items: "> tr:not(:first)",
appendTo: $tabs,
helper: "clone",
zIndex: 999990,
start: function () {
$tabs.addClass("dragging")
},
stop: function () {
$tabs.removeClass("dragging")
}
})
但是这里我没有其他表的标签。
but here i dont have a tab for other table.
推荐答案
Jquery
var $tabs = $('#table-draggable2')
$("tbody.connectedSortable")
.sortable({
connectWith: ".connectedSortable",
items: "> tr:not(:first)",
appendTo: $tabs,
helper: "clone",
zIndex: 999990
})
.disableSelection();
var $tab_items = $(".nav-tabs > li", $tabs).droppable({
accept: ".connectedSortable tr",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
return false;
}
});
HTML
<table id='table-draggable1'>
<tbody class="connectedSortable">
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
<tr>
<td>156</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>
<table id='table-draggable2'>
<tbody class="connectedSortable">
<tr>
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
</tr>
<tr>
<td>356</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>456</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
</tbody>
</table>
这篇关于使用draggable和droppable在jquery中的两个相似表之间拖放表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!