jQuery Draggable containment issue, cannot drag elements outside parent div

Question

I have a very simple image manager, like so:

<div id="container">

    <div id="draggable-images">
        <img class="images" src="image1.jpg" />
        <img class="images" src="image2.jpg" />
        <img class="images" src="image3.jpg" />
    </div>

    <div id="droppable-area>
    </div>

</div>

And jQuery to go with it:

        $( ".images" ).draggable({ containment: "#container" });
        $( "#droppable-area" ).droppable();

And this is the CSS:

#draggable-images {
    overflow:scroll;
    overflow-x:hidden;
}

.images {
    z-index:10000;
}

Images are draggable, but they won't come out of their parent div, no matter what the containment is set to (even tried to set it to window).

Does anyone know how to make it work, or why it doesn't work?

I've set z-index high to make sure that's not the issue. I also tried making #draggable-images div without scrollbar, it didn't work either.

Seems to work like a charm on jQuery's site, can't figure what I'm missing.

Answer 1

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