jQuery UI使用Drag e Drop添加Tabs

Question

我有一组JQuery UI选项卡，我想从预定的选项集中拖动以添加新选项卡。

以下是我目前的情况：http://jsfiddle.net/MrThursday/z8xZ3/

我以标准方式初始化选项卡，并且想知道是否有一种简单的方法可以使选项卡像简单的拖放操作的可排序插件一样？

           var tabs = $("#tabs").tabs();
           tabs.find(".ui-tabs-nav").sortable({
              axis: "x",
              stop: function () {
                 tabs.tabs("refresh");
              }
           });

正如您所看到的，我可以拖动选项卡中的组件选项，但我不太确定如何添加新选项卡而无需通过模式添加新选项卡，如本例所示; http://jqueryui.com/tabs/#manipulation（这太动态了。我希望用户能够像之前所说的那样拖放预定的一组。）

任何帮助都将不胜感激。

Answer 1

有趣的案例。

您可以将标签设置为droppable以接收拖动的元素;像：

$('#tabs').droppable({
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>" + ui.draggable.text() + "</a></li>");
        $("div#tabs").append(
            "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>");
        $("div#tabs").tabs("refresh");

        $(ui.draggable).remove()
    }
});

并在drop事件中添加拖动元素中的新标签，并从列表中删除该元素。

演示：

Answer 2

在上面刚刚提到的JQueryUI文档中，您可以查看源代码。在这里，您可以找到用于插入选项卡的方法。当用户验证模态表单时，将调用此方法。

// actual addTab function: adds new tab using the input from the form above
function addTab() {
  var label = tabTitle.val() || "Tab " + tabCounter,
    id = "tabs-" + tabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
    tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

  tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
  tabs.tabs( "refresh" );
  tabCounter++;
}

当然，您可以替换变量tabContent和tabTitle。