Question

我在手风琴小工具里面有一个可拖动的对象。拖动时，它会约束其父级，即accordion元素。我试图使用'收容'选项但没有成功。

我用FireFox 3.5.5和Chromium 4尝试过这个。

有没有办法解决它？

由于

Answer 1

对于那些寻找完整示例的人，请查看jQuery UI演示中的Shopping Cart example。这是一个可放置的示例，但是说明了所要求的内容（拖动手风琴之外的元素）。

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

继续从那里开始。

Answer 2

我的回答适用于sortables，我认为draggables应该是相似的。我能够通过使用'clone'而不是默认的'orginal'并使用appendTo：'body'来使其工作。这很奇怪，因为如果你使用原始作为助手，它似乎不会将助手附加到身体上，即使你认为如果你设置了appendTo：'body'也应该如此。我希望你能让它发挥作用！

Answer 3

尝试

$（“。selector”）。draggable（{appendTo：'body'}）;

Answer 4

您是否尝试过使用containment value of '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手风琴之外，因为对于accordions容器，溢出模式设置为隐藏。

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>

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

5 个答案: