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/

Answer 1

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.

Answer 2

Though there is an option - 'stack' existing while initiating draggables, but it is not working properly, So I have wrote a small library dragToFront playing with z-index. Following is the plunkr link

https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/

Answer 3

Stack wasn't working for me either. I was able to correct the z-index issue by using the appendTo property.

function setupDraggableFields($elements) {
    $elements.draggable({
        helper: "clone",
        handle: ".field-sort-handle",
        appendTo: ".section-container"
    });
}