Introduzione a drag and drop

Per introdurre i meccanismi con cui HTML5 implementa le funzionalità di drag and drop descriviamo come permettere all'immagine contenente le ciliegie possa essere trascinata dall'area verde a quella gialla e viceversa.

La maggior parte degli utenti di applicazioni grafiche conosce le operazioni di trascinamento (drag) e rilascio (drop) di elementi grafici, spesso associate alla esecuzione di funzioni sugli oggetti interessati (un esempio è la cancellazione di un file tramite il suo trascinamento nel cestino).

1. posizionamento del cursore sull'oggetto mediante il mouse;
2. pressione del tasto sinistro del mouse;
3. spostamento dell'oggetto con il mouse mantenendo la pressione del tasto sinistro;
4. rilascio del tasto sinistro del mouse quando l'oggetto trascinato si trova nella posizione desiderata.

HTML5 ha reso disponibili un insieme di funzionalità che permettono di realizzare il drag and drop degli elementi delle pagine web. Vediamo in cosa consistono.

Attributo draggable

Tutti gli elementi HTML possono essere resi "trascinabili" settando a "true" il loro attributo draggable. L'attributo draggable ha tre stati: true, false, auto. Il valore di default è auto che setta il valore dell'attributo a true o false a seconda del comportamento di default per esso previsto dallo user agent (browser).
Gli elementi di tipo img e di tipo a con attributo href hanno per default stato draggable uguale a true.

Gli altri elementi possono essere resi trascinabili ponendo draggable="true". Proprio quello che ho fatto per questo paragrafo.

Il fatto di settare a true l'attributo draggable di un elemento fa si che il contenuto visibile dell'elemento stesso possa essere selezionato per le operazioni di drag and drop, ma nulla sarà eseguito se non si gestiscono, tramite codice JavaScripts, gli eventi generati a tale scopo. In questo esempio sono gestiti gli eventi: dragstart, dragover e drop che permettono all'immagine delle ciliegie di poter trascinata dall'area verde a quella gialla e viceversa.

Al solo scopo di facilitare l'utente nella individuazione di elementi trascinabili ho impostato per essi la proprietà di stile cursor:move;

Ecco il codice necessario per spostare le ciliegie dall'area verde a quella gialla e viceversa:

HTML

<div id="origine" ondragover="DragOver(event)" 
		ondrop="Drop(event)">
	<img src="../images/ciliege.jpg" id="ciliegia" 
		ondragstart="iniziaDrag(event)"  width="150px"/>
</div >
<div id="destinazione" ondragover="DragOver(event)" 
		ondrop="Drop(event)">
</div>

CSS

  
#origine {
	width:170px; height:135px;
	position:absolute; top:0px;
	background-color:#af3;
}
	#destinazione {
	width:170px; height:135px;
	position:absolute; top:210px;
	background-color:#ff3;
}
img {
	cursor:move;
	padding:10px;
}

JS

  
var foto;
function iniziaDrag(event){
	foto=event.target.getAttribute("id");
}
function DragOver(event){
	event.preventDefault();
}
function Drop(event){
	event.target.appendChild(document.getElementById(foto));
}