JQuery UI 可拖动元素在选项卡更改时消失

Question

我正在使用 jquery UI 的选项卡和可拖动/可放置。这是一个包含三个选项卡的简单选项卡，其中每个选项卡都有一些可拖动的元素。这些元素被上面的可放置 div 接受。

HTML:

<div id="topPart">
    <div class="droppable"></div>
    <div class="droppable"></div>
    <div class="droppable"></div>
</div>

<div id="bottomPart">
    <div id="tabs" class="row">
        <ul class="ui-tabs-nav">
            <li><a href="#tabs-1">Images</a></li>
            <li><a href="#tabs-2">Text</a></li>
            <li><a href="#tabs-3">Other</a></li>
        </ul>
        <div id="tabs-1">
            <i id="" class="draggable fa fa-fighter-jet fa-2x" style="z-index:5;"></i>
            <i id="" class="draggable fa fa-file-image-o fa-2x" style="z-index:5;"></i>
            <i id="" class="draggable fa fa-soccer-ball-o fa-2x" style="z-index:5;"></i>
            <i id="" class="draggable fa fa-plane fa-2x" style="z-index:5;"></i>
        </div>
        <div id="tabs-2">
            <i id="" class="draggable fa fa-file-text fa-3x" style="z-index:5;"></i>
            <i id="" class="draggable fa fa-text-height fa-3x" style="z-index:5;"></i>
            <i id="" class="draggable fa fa-text-width fa-3x" style="z-index:5;"></i>
        </div>
        <div id="tabs-3">
            <i id="" class="draggable fa fa-android fa-3x" style="z-index:5;"></i>
            <i id="" class="draggable fa fa-windows fa-3x" style="z-index:5;"></i>
        </div>
    </div>
</div>

CSS:

.droppable {
    height: 50px;
    width: 50px;
    background-color: gray;
    margin: 2px 2px 2px 2px;
    display: inline-block;
}

JS:

$('#tabs').tabs();

$(".draggable").draggable();

$(".droppable").droppable({
    accept: ".draggable",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function (event, ui) {
        $(this).addClass("ui-state-highlight");
        $(this).parent().css("aria-hidden", "false !important");
    }
});

问题是，当您将元素从选项卡拖到可放置的 div 中，然后切换选项卡时，该元素将会消失。

我知道 .tabs() 会将其他样式添加到选项卡中。 div 选项卡有类

aria-hidden="false"

和风格

display: block;

当选项卡处于事件状态时，aria-hidden 设置为 false，显示设置为阻止，当选项卡不活动时，显示设置为 true/none。

我尝试在 droppable() 中的 drop 事件上重置这些并删除这些类，但没有成功。当选项卡更改时，掉落的元素将始终消失。知道我还应该看哪里吗？

JSFiddle

谢谢

Answer 1

你的问题是，例如飞机位于 tab-1 中。当您切换选项卡时，tabs-1 会获取 display:none 以及他的所有子元素。

我建议将放置在上面框中的元素写入/克隆/复制到另一个元素中，该元素不会切换。