CODEWITHSUNDEEP
jqueryjquery-uidrag-and-drop
Ebbs
Ebbs

Reputation: 1050

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.

Upvotes: 2

Views: 7266

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

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: jsFiddle

Upvotes: 2

TCHdvlp
TCHdvlp

Reputation: 1334

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.

Upvotes: 0

Related Questions