如何使用jQueryUI将可排序行附加到另一个选项卡中的表中？

我有一个带有jQueryUI选项卡的页面，每个选项卡都包含一个表。我已将选项卡设置为可拖放，表格设置为可排序

我希望能够从活动选项卡内的表中拖动一行，将其放到另一个选项卡上，并将该行附加到该选项卡中包含的表中

这是我的JS：

$("#tabs").tabs();

$("tbody").sortable({
    items: "> tr:not(:first)",
    appendTo: "parent",
    helper: "clone"
    }).disableSelection();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after(ui.draggable);
        ui.draggable.remove();
    }
});

如图所示，行是可拖动的，但将它们放到另一个选项卡上并不会将其附加到其中的表中

问题似乎是我试图使用ui.draggable jquery元素在该行中选项卡表的最后一行之后追加：

$(tabdiv + " table tr:last").after(ui.draggable);

相反，如果我自己用

标记构建行，并使用ui.draggable的html，如下所示：

$(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");

$（tabdiv+“table tr:last”）。在（“+ui.draggable.html（）+”）之后；

然后，它会按预期工作，如图所示

这样做的问题是，我丢失了附加到原始行的任何类或数据信息

有人能告诉我如何附加被拖动的行元素吗？（顺便说一句，我是jquery的新手，如果这是一个基本问题，我深表歉意。）

您可以使用该方法附加当前元素的克隆，包括数据和事件处理程序，如下所示：

$(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");

$（“#制表符”）.tabs（）；
$（“tbody”）。可排序({
项目：“>tr:not（：first）”，
附录：“家长”，
助手：“克隆”
}).disableSelection（）；
$（“#tabs ul li a”）。可拖放({
hoverClass:“drophover”，
公差：“指针”，
drop：函数（e、ui）{
var tabdiv=$（this.attr（“href”）；
$（tabdiv+“table”）.append（ui.draggable.clone（true.show（））；
ui.draggable.remove（）；
}
});
表格{
边界塌陷：塌陷；
}
表tr td{
边框：1px纯红；
填充：2×15px 2×15px；
宽度：50px；
}
#标签ulli.drophover{
颜色：绿色；
}









可乐
可乐
可乐
c00
c01
二氧化碳
c10
c11
c12
c20
c21
c22
可乐
可乐
可乐
a00
a01
a02
a10
a11
a12
a20
a21
a22
可乐
可乐
可乐
f00
f01
f02
f10
f11
f12
f20
f21
f22