jQuery-Ui: Cannot drag object outside of an accord

Question

I have a draggable object inside of an accordion widget. When dragging it, it's constrained its parent, the accordion element. I've tried to use the 'containment' option with no success.

I have tried this with FireFox 3.5.5 and Chromium 4.

Is there a way to solve it?

Thanks

Answer 1

For those of you looking for a complete example, take a look at the Shopping Cart example on the jQuery UI demo. This is a droppable example, but illustrates exactly what was being asked (Dragging a element outside of an accordion).

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

And continue on from there.

Answer 2

My answer applies to sortables, I think draggables should be similar. I was able to make it work by using 'clone' instead of the default 'orginal' and using appendTo: 'body'. It's weird because if you use original as the helper it doesn't seem to append the helper to the body even though you would think it should if you set appendTo:'body'. I hope you can get it working!

Answer 3

Have you tried using the containment value of 'document':

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

Here's an example I was able to drag outside the accordion:

<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 4

You cannot drag items outside of a jQuery accordion because the overflow mode is set to hidden for the accordions containers.

1) You can try setting the overflow to visible(by an inline style override) but in that case the accordion itself may stop working.

<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>

Answer 5

Try

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