HTML5: drag & drop

Una delle novità più interessanti di HTML5 che si sta diffondendo è il drag&drop, funzionalità non nuova al 100% perché già resa disponibile da librerie javascript come per esempio jQuery UI, ma che presenta interessanti novità oltre, ovviamente, ad essere disponibile nativamente nei browser. Già i browser, trattandosi di html5 si pone il solito problema dello stato del supporto, su caniuse possiamo farci un’idea rispetto alla nostra funzione.

Vediamo come funziona il nostro drag&drop.

Come prima cosa inseriamo nel nostro documento html un div che servirà da drop area e poi un’immagine da trascinare, questo elemento avrà l’attributo draggable=”true”:

<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="images/articolo.gif" draggable="true" ondragstart="drag(event)">

Oltre a quanto descritto è già stato inserito il codice javascript per la gestione degli eventi, il primo, ongragstart, si registra all’inizio del trascinamento; sul box invece abbiamo intercettato due eventi: ondragover, ovvero la sovrapposizione tra l’elemento trascinato e l’area di atterraggio e ondrop, ovvero il rilascio vero e proprio.

Vediamo cosa accade evento per evento partendo dal dragstart:

function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}

Il metodo dataTransfer.setData () imposta il tipo di dati e il valore dei dati trascinati: nel nostro caso dentro Text l’id dell’immagine che trasciniamo.

L’evento onDragOver specifica dove i dati trascinati possono essere rilasciati.

function allowDrop(ev){
ev.preventDefault();
}

Per impostazione predefinita, i dati / elementi non possono essere rilasciati in altri elementi. Per consentire il drop quindi dobbiamo evitare la gestione predefinita.

Infine il drop vero e proprio:

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

Dove si va a leggere l’id dell’elemento in fase di trascinamento e con il metodo appendChild applicato al target, il nostro div, aggiungiamo la nostra immagine.

L’esempio