'jquery ui draggable element appears behind other elements?

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 1:^[1]

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/

Solution 2:^[2]

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"
    });
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sandeep Gantait
Solution 2	J_sdev

'jquery ui draggable element appears behind other elements?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]