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.
I found a few issues with your code, I think I've worked them out and got it working.
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.