drag and drop - jquery ui draggable element appears behind other elements? -

i using jquery ui draggable, , droppable make possible reorder pictures different boxes.

when drag picture out of box appears under other elements once leaves direct container.

while googling able found add:

   helper: 'clone',    appendto: "body" 

this makes being dragged appears on top of elements, leaves original copy still in box , not want that.

is there way can make element stay on top of when being dragged? have tried high z-index no avail.

here jsfiddle shows first draggle element behind behind second. not issue other way around. not able change position relative on containing divs without breaking lot of other things.

http://jsfiddle.net/cbwhx/6/

i found few issues code, think i've worked them out , got working.

working example

first fix 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 want use stack option:

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

from api documentation:

stack
controls z-index of set of elements match selector, brings dragged item front.