将表行从一个选项卡表拖放到另一个选项卡表 – Jquery
我有两个选项卡（使用boostrap构建），每个选项卡都有自己的表。
我需要从一个选项卡拖动表行并放入另一个选项卡表。 拖动时我想在放入表格之前打开光标下的标签。 任何帮助赞赏。
这是我的HTML代码
col1 col2 col3 col4 256 668 100.95 1.82 256 668 100.95 1.82
col1 col2 col3 col4 256 668 100.95 1.82 256 668 100.95 1.82
这是我的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"); } }); });
编辑： 链接到jsfiddle