jQuery UI add Tabs with Drag e Drop

问题

I have a set of JQuery UI tabs into which I would like drag from predetermined set of options to add new tabs.

Here is what I have so far: http://jsfiddle.net/MrThursday/z8xZ3/

I initialise the tabs in the standard way and am wondering if there is an easy way to make the tabs behave like the sortable plugin for simple drag and drop operations?

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

As you can see I am able to drag options for the components in the tabs, but I am not quite sure how to add new tabs without having to add a new tab via a modal as in this example; http://jqueryui.com/tabs/#manipulation (Which is too dynamic. I want the user to simply be able to drag and drop for a predetermined set as said before.)

Any help would be appreciated.

回答1:

Interesting case.

You can set your tabs as droppable to receive the dragged elements; like:

$('#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()
    }
});

and on the drop event add the new tab from the dragged element and remove that element from the list.

Demo:

回答2:

In the JQueryUI documentation you just mentionned above, you can look at the source code. Here you can find the method used to insert a tab. This method is called when the user validate the modal form.

// 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++;
}

Of course, you can replace the variables tabContent and tabTitle.

来源：https://stackoverflow.com/questions/18187564/jquery-ui-add-tabs-with-drag-e-drop

标签

jquery

jquery-ui

drag-and-drop