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

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

Try

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