Corsi on-line

Drag & Drop con HTML5

Il Drag & Drop è un’operazione che consente di spostare delle componenti di pagina dalla loro posizione iniziale ad un’altra che verrà memorizzata fino all’eventuale spostamento successivo, tale procedura viene effettuata per trascinamento (drag) dell’oggetto coinvolto tramite il cursore del mouse o sweep su schermo touchscreen e successiva “liberazione” (drop) nella nuova collocazione.

designcarton2Un semplice esempio di implementazione pratica del Drag & Drop potrebbe essere quello che prevede di sfruttare le potenzialità di HTML5 per consentire il trascinamento di un’immagine in una divbox. A tal fine lo sviluppatore dovrebbe creare tre funzioni JavaScript, la prima delle quali dedicata alla fase di trascinamento; in essa il metodo setData() consentirà lo spostamento dei dati associati all’oggetto dataTransfer tramite variabile (“x“):

function trascina(x) {
    x.dataTransfer.setData("text", x.target.id);
}

La seconda funzione si occuperà invece del rilascio dell’elemento trascinato nel target previsto (la divbox), qui ad agire sarà il metodo appendChild() in grado di aggiungere degli elementi generati dal DOM (Document Object Model), cioè dal modello di struttura del documento sul quale si opera, ad altri elementi di pagina:

function rilascia(x) {
    x.preventDefault();
    var data = x.dataTransfer.getData("text");
    x.target.appendChild(document.getElementById(data));
}

L’ultima funzione non farà altro che consentire il trascinamento e il rilascio dell’immagine nel target stabilito intercettando la variabile utilizzata nell’evento precedente quando l’elemento ad essa associata sarà al di sopra del target:

function rilasciaImg(x) {
    x.preventDefault();
}

Ora l’HTML permetterà di gestire gli eventi previsti passando ad essi le funzioni definite, tali eventi sono ondrop, che consente di eseguire codice JavaScript quando un elemento trascinabile viene rilasciato in una divbox, ondragover, che ricorre quando un elemento trascinato si trova al di sopra del target, e ondragstart, che ricorre quando inizia il trascinamento di un elemento. A questo punto, per comodità del lettore, riportiamo l’intero codice della pagina con tanto di CSS per la formattazione della divbox.

<!DOCTYPE HTML>
<html>
<head>
<style>
#dro {width:320px;
height:65px;
padding:5px;
border:1px
dashed #ccc;
}
</style>
<script>
function trascina(x) {
    x.dataTransfer.setData("text", x.target.id);
}
function rilascia(x) {
    x.preventDefault();
    var data = x.dataTransfer.getData("text");
    x.target.appendChild(document.getElementById(data));
}
function rilasciaImg(x) {
    x.preventDefault();
}
</script>
</head>
<body>
<p>Trascina l'immagine nel riquadro:</p>
<div id="dro" ondrop="rilascia(event)" ondragover="rilasciaImg(event)"></div><br />
<img id="dra" src="img.png" draggable="true" ondragstart="trascina(event)" width="300" height="60">
</body>
</html>

Naturalmente il metodo proposto non è l’unico disponibile, ma ha il vantaggio di essere molto semplice da implementare e da estendere con funzionalità addizionali.

Post correlati
  • stefano

    Se metto due immagini, e sposto la seconda immagine dentro il quadrato, nel quadrato anzichè apparire la seconda icona, compare la prima! Come mai?

  • stefano

    Ho risolto. Bisogna cambiare l’ID dell’immagine. Adesso però mi sono accorto che se si creano più elementi da draggare, nel momento in cui si sposta un elemento sopra un secondo elemento, il secondo elemento sparisce. Questo codice non va bene se lo si vuole espandere perchè è buggato.

I più letti del mese
Tematiche