jQuery 选项卡可排序和恢复到选项卡答案

【问题标题】：jQuery Tabs Sortable and Revert To TabjQuery 选项卡可排序和恢复到选项卡
【发布时间】：2013-08-15 12:47:51
【问题描述】：

这个问题与我之前提出的一个问题有关 (jQuery UI add Tabs with Drag e Drop)

基本上，我唯一想不通的两件事是在我添加了一个新标签之后，但决定将其删除，然后将其放到不应该出现的地方（比如在另一个标签的顶部） ) 如何让标签恢复到原来的位置？我知道我必须在这里添加它：

$('#tabsOptions ul').droppable({
drop: function (event, ui) {
    // Where the drop originates from
    if (ui.draggable.parent().attr("id") == "tabsList") {

        var expelledComponents = 
          $(ui.draggable.children("a").attr("href")).
               html().replace(emptyTab, "");

        $("#tabsComponentsList").append($(expelledComponents).html());

        $(ui.draggable.children("a").attr("href")).remove();

        $('#tabsOptions ul').append("<li>" + ui.draggable.text() + "</li>");

        $(ui.draggable).remove();

        //  Refreshes tabs - especially helpful when removing the first tab
        $('#tabs').tabs("refresh");

        $("#tabsComponentsList li").each(function (i, item) {
            $(item).attr("class", "selectable");
        });

        $("#tabsOptionsList li").each(function (i, item) {
            $(item).attr("class", "selectable");
        });
    }
}
});

另一件事是我不知道如何让标签再次可排序？它之前工作过，但我忘记了它停止工作的地方，我不知道为什么它不再工作了。

任何帮助将不胜感激。提前致谢。

这里是Fiddle

编辑：更新了小提琴。问题不是首先删除和添加选项卡。我解决了这个问题，但现在我有一个唠叨的最后一个问题。一切都按照我想要的方式工作，但是当我拖动一个选项卡时，它在拖动过程中不可见。

当我在适当的区域释放时，它会被正确移除。

有人知道如何在拖动过程中使选项卡可见吗？

（如果您查看小提琴和带有注释“//使选项卡可拖动但使选项卡无法排序”的部分，如果启用下一行，则选项卡在拖动过程中可见，但选项卡不会排序）

【问题讨论】：

我注意到的唯一问题是，当您将“TAB”放回#tabs 部分时，它会忘记它是一个TAB。这是你说的错误吗？
您是指$('#tabsList').droppable 还是$('#tabsOptions ul').droppable 部分？我以为$('#tabs').tabs("refresh"); 会重新初始化选项卡？
当回到$('#tabslList').droppable 时，它似乎变成了一个伪标签，具有所有正确的属性，但没有真正的标签属性。我不认为refresh 会为你做这件事，那里。您需要以某种方式将其重新附加到 $('#tabs')，然后重新初始化 .tabs() 小部件。
好吧，我正在调查。如果只是通过将$('#tabsList').droppable 中的$('#tabsList li').draggable(); 更改为$('#tabsList li').draggable({ revert: true });，我对恢复选项卡进行排序。我现在将研究重新初始化 .tabs() 小部件。
感谢 DevlshOne，您的评论将我引向正确的方向。

标签： jquery jquery-ui jquery-tabs jquery-ui-sortable

【解决方案1】：

当回到$('#tabslList').droppable 时，它似乎变成了一个伪选项卡，具有所有正确的属性，但没有真正的选项卡属性。我不认为刷新会为你做这件事，那里。您需要以某种方式将其重新附加到 $('#tabs')，然后重新初始化 .tabs() 小部件。

【讨论】：