jquery ui elemento trascinabile appare dietro altri elementi?

Question

Sto usando jquery ui trascinabile e infine trascinabile per rendere possibile riordinare le immagini in diverse caselle.

Quando trascino un'immagine fuori dalla scatola, appare sotto tutti gli altri elementi una volta lasciato il contenitore diretto.

Mentre googling ero in grado di fondare aggiungere:

helper: 'clone', 
    appendTo: "body" 

Questo lo rende così ciò che viene trascinato appare in cima a tutti gli elementi, ma lascia la copia originale ancora nella scatola e io no voglio quello.

C'è un modo per far sì che l'elemento rimanga in cima a tutto quando viene trascinato? Ho provato un alto z-index inutilmente.

Ecco un jsfiddle che mostra il primo elemento di trascinamento dietro il secondo. non è un problema il contrario. Non sono in grado di cambiare la posizione relativa sui div di contenimento senza interrompere molte altre cose.

http://jsfiddle.net/cBWhX/6/

Answer 1

ho trovato alcuni problemi con il codice, penso che li ho lavorato fuori e ottenuto che funziona.

Working Example

prima difficoltà il codice 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> 

Successivo Probabilmente desidera utilizzare il stack option:

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

$('.draggableContainer').droppable() 

Dal API documentation:

Stack
Controlla lo z-index dell'insieme di elementi che corrispondono al selettore, porta sempre in primo piano l'elemento attualmente trascinato.

Answer 2

Anche se v'è un'opzione - 'pila' esistente mentre si inizia draggables, ma non funziona correttamente, quindi ho scritto una piccola biblioteca dragToFront giocare con z-index. Di seguito è riportato il link plunkr

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