Drag and Drop

Questo argomento è piuttosto importante per la costruzione delle interfacce grafiche.

Trascinamento

Alcuni elementi HTML come img e a sono trascinabili per default. Altri elementi, come ad esempio div possono diventarlo impostando l'attributo draggable="true".

Per evidenziare gli elementi trascinabili si può usare la proprietà di stile cursor:move; impostando la quale il cursore assume una forma particolare quando posizionato sull'elemento.

Eventi generati / gestiti durante le operazioni di Drag and Drop

Gli elementi con attributo draggable="true" generano l'evento dragstart quando, con il cursore posizionato sopra di esso, viene premuto il tasto sinistro del mouse.

Quando un elemento viene trascinato sopra un elemento draggable viene generato l'evento dropover.

Il rilascio del tasto sinistro del mouse genera un evento drop.

Occorre scrivere del codice JavaScript per gestire questi eventi.

Esempio

Come primo esempio trascineremo l'immagine nel riquadro di destinazione giallo.

Gli elementi HTML interessati sono due contenitori e un'immagine:

	<div id="origine">
		<img id="tools_old" src="../images/toolsOld.png" alt="cassetta degli attrezzi" draggable="true">
	</div>
	<div id="bersaglio">
		Trascina qui l'immagine.
	</div> 

Con i seguenti attributi di stile: DragAndDrop01.css

Il codice JavaScript è questo DragAndDrop01.js

In questo esempio, dopo il trascinamento sul riquadro giallo non sono consentiti altri trascinamenti. Nei prossimi esempi vedremo come superare questa limitiazione.