/ / HTML 5 trascina e rilascia più immagini: html, css, html5, immagine, trascina selezione

HTML 5 trascina e rilascia più immagini: html, css, html5, immagine, trascina e rilascia

Sto cercando di creare una funzione semplice in cui gli utentipuò trascinare e rilasciare le immagini tra due div. Il problema che sto riscontrando è quando trascini un'immagine sopra un'altra immagine, quindi finirà all'interno di quel tag img.

Puoi vedere l'errore qui: http://codepen.io/anon/pen/smgyd

Quello che mi piacerebbe che accadesse è che le immagini siano posizionate l'una sotto l'altra, anche dopo averle trascinate una sopra l'altra.

Spero di aver chiarito il mio problema. Qualsiasi consiglio è molto apprezzato. Grazie.

risposte:

0 per risposta № 1

per favore aggiungi anche il tuo codice qui.

Lo script fa esattamente quello che vuoi:

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

Se si rilascia un'immagine mentre il mouse si trova sopra un'immagine, il ev.target è uguale a questa immagine. Sarà necessario trovare il sink di destinazione desiderato del target corrente.

Se potessi usare jQuery potresti usare $.closest("div"); dato che sei su JS alla vaniglia, ecco un thread che può aiutarti in questo compito: Trovare l'elemento più vicino senza jQuery