Question

我已经将几个jQuery UI连接在一起，并且大部分内容都在运行。我有一个问题，我有一个标签页，每个表都有可排序的手风琴元素......

在将元素移动到新标签之前，一切似乎都能正常工作，它似乎失去了它的父级。当我展开一个掉落的手风琴时，它要么越过容器，要么根本不显示，这取决于手风琴在放入新标签时是否打开。

我把我的代码的jsfiddle示例放在一起。这是我的jquery和jsfiddle http://jsfiddle.net/33Wzs/6/的链接，来回移动元素的几秒钟可以让你知道发生了什么。

我的Html

<div id="tabs" class="nav nav-tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a>

        </li>
        <li><a href="#tabs-2">Proin dolor</a>

        </li>
    </ul>
    <div id="tabs-1" class="tab-pane">
        <div id="accordion">
            <ul id="sortable1" class="connectedSortable ui-helper-reset">
                <li>
                    <header><span class="handle pull-left cursor-move">[move]</span> Item 1</header>
                    <div>
                        <h4>Item 1</h4>

                        <p>Here is some text to go with <em>item #</em>. How does this work?</p>
                    </div>
                </li>
                <li>
                    <header><span class="handle pull-left cursor-move">[move]</span> Item 2</header>
                    <div>
                        <h4>Item 1</h4>

                        <p>Here is some text to go with <em>item #</em>. How does this work?</p>
                    </div>
                </li>
                <li>
                    <header><span class="handle pull-left cursor-move">[move]</span> Item 3</header>
                    <div>
                        <h4>Item 1</h4>

                        <p>Here is some text to go with <em>item #</em>. How does this work?</p>
                    </div>
                </li>
                <li>
                    <header><span class="handle pull-left">[move]</span> Item 4</header>
                    <div>
                        <h4>Item 1</h4>

                        <p>Here is some text to go with <em>item #</em>. How does this work?</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="tabs-2">
        <div id="accordion2">
            <ul id="sortable2" class="connectedSortable ui-helper-reset"></ul>
        </div>
    </div>
</div>

我的jQuery

$(function () {
    $("#accordion").accordion({
        collapsible: true,
        header: 'header',
        active: false,
        heightStyle: 'content'
    });
    $("#accordion2").accordion({
        collapsible: true,
        header: 'header',
        active: false,
        heightStyle: 'content'
    });
});

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

$(function () {

    $("#sortable1, #sortable2").sortable().disableSelection();
    $("#sortable1, #sortable2").sortable("option", "handle", ".handle");

    var $tabs = $("#tabs").tabs();
    var $tab_items = $("ul:first li", $tabs).droppable({
        tolerance: 'pointer',
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            var $item = $(this);
            var $list = $($item.find("a").attr("href"))
                .find(".connectedSortable");
            ui.draggable.hide("fast", function () {
                $tabs.tabs("option", "active", $tab_items.index($item));
                $(this).appendTo($list).show("fast");
            });

        }
    });

    return false;
});

Answer 1

我弄清楚发生了什么......就在

之下

$(this).appendTo($list).show("fast");

我添加了

$(this).removeAttr('style');

它解决了我的问题。我仍然不知道风格来自哪里......这是一个有效的jsfiddle http://jsfiddle.net/33Wzs/7/

手风琴在放入新标签时会搞乱

1 个答案: