jQuery-Ui: Cannot drag object outside of an accordion

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

Answer 1

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 2

Try

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

Answer 3

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 4

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 5

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>