Question

我正在使用jquery UI的标签和draggable / droppable。它是带有三个选项卡的简单选项卡，其中每个选项卡都有一些可拖动的项目。上面的droppable div接受了这些项目。

screenshot01

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

你的问题是，例如飞机在标签-1中。当您切换选项卡时，tabs-1将获得display:none以及所有子元素。

我建议将写在上面方框中的项目写入/克隆/复制到另一个未切换的元素中。

Answer 2

您可以使用jQuery的.clone() - 函数并使用Droppable的ui-Object：

我将此添加到drop事件中：

 var clone = ui.helper.clone();
        clone.css({
            left: 0,
            top: 0
        });
        ui.helper.remove();
        $(this).append(clone);

必须完成一些样式设置或向克隆中添加新的css类。

如果丢弃的元素应该再拖动，请执行以下操作：

clone.draggable();

如果拖动的元素不应消失，请添加选项：

helper: 'clone'

你的可拖动。

链接到fiddle

Answer 3

通过更多测试和尝试，调试和试验，我提出了不同的解决方案。我没有使用clone（），而是使用了detach（）方法。

所以我刚把这一行添加到drop事件中：

ui.helper.detach().appendTo(this).position({ of: $(this), my: 'center', at: 'center' }).draggable();

更新了JS代码：

function initializeDroppable() {
    $(".gs-w").droppable({
        accept: ".draggable",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function (event, ui) {
            $(this).addClass("ui-state-highlight");

            ui.helper.detach().appendTo(this).position({ of: $(this), my: 'center', at: 'center' }).draggable();
        },
        out: function (event, ui) {
            $(this).removeClass("ui-state-highlight");
        }
    });
};

JQuery UI Draggable项目在选项卡更改时消失

3 个答案: