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

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

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

Try

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