jquery ui draggable element appears behind other elements?

Question

I am using jquery ui draggable, and eventually droppable to make it possible to reorder pictures into different boxes.

When I drag a picture out of the box it appears under all the other elements once it leaves its direct container.

While googling I was able to found to add:

   helper: 'clone',
   appendTo: "body"

This makes it so what is being dragged appears on top of all elements, but it leaves the original copy still in the box and I do not want that.

Is there a way I can make the element stay on top of everything when being dragged? I have tried a high z-index to no avail.

Here is a jsfiddle that shows the first draggle element behind behind the second. it is not an issue the other way around. i am not able to change the position relative on the containing divs without breaking a lot of other things.

http://jsfiddle.net/cBWhX/6/

Solution

I found a few issues with your code, I think I've worked them out and got it working.

Working Example

First fix your HTML:

<div id="container1" style="background-color:red;padding:20px">
    <div class="draggableContainer">
        <div class="draggable" style="background-color:blue;width:200px;height:200px;"></div>
    </div>
    <div class="draggableContainer">
        <div class="draggable" style="background-color:yellow;width:200px;height:200px;"></div>
    </div>
    <div class="draggableContainer"></div>
</div>

Next You'll probably want to use the stack option:

$('.draggable').draggable({
    revert: "invalid",
    snap: ".draggableContainer",
    stack: ".draggable"
});

$('.draggableContainer').droppable()

From the API documentation:

Stack
Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front.