jQuery UI 使用选项卡拖放 - 将元素从选项卡拖放到可放置区域，单击不同选项卡时可拖动消失

Question

我所拥有的是 jquery ui 选项卡，其中设置了可拖动元素，我在选项卡的右侧也有一个可放置区域。

我可以将我的元素从选项卡拖放到可放置区域。但是，如果我单击不同的选项卡，我从前一个选项卡拖动的元素将从可放置区域消失，直到我再次单击可拖动的选项卡所在的选项卡。

当我在不同的选项卡之间单击时，我需要保持从选项卡拖到可放置区域的所有元素可见。

如果有要求，我会设置一个 jsfiddle，但希望我已经充分解释了自己，不要担心这一点

提前致谢，Finbar

Answer 1

我已经重现了这个问题；）

这是因为标签隐藏了容器及其所有内容的变化。即使您尝试使用activate 事件将项目设置为显示，因为主容器已经隐藏，它也不会显示单个项目。所以你必须从字面上将可拖动的项目移动到可放置区域。这是代码。

HTML

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a>

        </li>
        <li><a href="#fragment-2"><span>Two</span></a>

        </li>
        <li><a href="#fragment-3"><span>Three</span></a>

        </li>
    </ul>
    <div id="fragment-1">
        <div id="draggable" class="ui-widget-content">
            <p>Drag me to my target</p>
        </div>
    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

CSS

#draggable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    margin: 10px 10px 10px 0;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    margin: 10px;
}

jQuery

$("#tabs").tabs();
$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        var $x = ui.draggable;
        $x.appendTo($("#droppable")).css({
            top:0,
            left:0
        });
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});

小提琴

JSFiddle Example