jquery - jQuery-Ui：无法将对象拖到手风琴之外

Question

我在手风琴小部件中有一个可拖动的对象。拖动它时，它会限制其父元素，即手风琴元素。我尝试使用“遏制”选项但没有成功。

我已经用 FireFox 3.5.5 和 Chromium 4 试过了。

有没有办法解决它？

谢谢

Answer 1

对于那些正在寻找完整示例的人，请查看 jQuery UI 演示中的购物车示例。这是一个可放置的示例，但准确地说明了所要求的内容（将元素拖到手风琴外）。

$(function() {
        $( "#catalog" ).accordion();
        $( "#catalog li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
});

并从那里继续。

Answer 2

我的回答适用于 sortables，我认为 draggables 应该是相似的。我能够通过使用“克隆”而不是默认的“原始”并使用 appendTo：“body”来使其工作。这很奇怪，因为如果您使用 original 作为助手，它似乎不会将助手附加到正文，即使您认为如果您设置 appendTo:'body' 应该这样做。我希望你能让它工作！

Answer 3

尝试

$( ".selector" ).draggable({ appendTo: 'body' });

Answer 4

您是否尝试过使用'document' 的包含值：

$("#draggable1").draggable({ containment: 'document' });

这是一个我可以拖到手风琴外面的例子：

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div id="draggable1">
    <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
</div>

<script type="text/javascript">
$(function() {
    $("#accordion").accordion();
    $("#draggable1").draggable({ containment: 'document' });
});
</script>

Answer 5

您不能将项目拖到 jQuery 手风琴之外，因为手风琴容器的溢出模式设置为隐藏。

1）您可以尝试将溢出设置为可见（通过内联样式覆盖），但在这种情况下，手风琴本身可能会停止工作。

<div id="simpleAccordion" style="overflow: visible;">

 <h3>Header 1<h3>
 <div>...</div>

 <h3>Header 2<h3>
 <div>...</div>

 <h3>Header 3<h3>
 <div>...</div>

</div>