jQuery UI添加Tabs with Drag e Drop [英] jQuery UI add Tabs with Drag e Drop

问题描述

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

这是我到目前为止

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.

解决方案

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:

这篇关于jQuery UI添加Tabs with Drag e Drop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！