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/

Edit
Report