使用选项卡拖放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