Drag and drop

L'attività di trascinamento di elementi grafici, più comunemente nota come drag and drop, genera una serie di eventi legati al mouse che è possibile gestire e personalizzare.

Prima di analizzare questi eventi definiamo alcuni termini per gli oggetti coinvolti in questa operazione:

Termine	Descrizione
source	È l'elemento che dà origine al trascinamento
data payload	Si tratta dell'oggetto o i dati che intendiamo spostare
target	È l'elemento che può accettare l'oggetto o i dati che stiamo trascinando

È importante sottolineare che lo spostamento di un oggetto grafico può non essere fine a se stesso, ma che può sottintendere lo spostamento di dati o l'attivazione di elaborazioni che dipendono dalla nostra specifica applicazione. Da ciò l'importanza della definizione di un data payload rilevante per l'operazione che vogliamo associare al drag and drop.

Vediamo schematicamente le diverse fasi dell'esecuzione di un'operazione di drag and drop.

Rendere un elemento trascinabile (draggable)

Per consentire il trascinamento di un elemento, l'elemento source, è necessario innanzitutto renderlo draggable. Ciò può essere fatto impostando l'attributo o la corrispondente proprietà draggable a true:

<img id="miaImmagine" src="images/img.jpg" draggable="true""/>

Qualsiasi elemento può essere reso trascinabile e addirittura diversi browser prevedono che alcuni elementi, come ad esempio immagini e link, siano trascinabili di default. A questo punto occorre intercettare e gestire gli eventi propri del drag and drop.

dragstart, l'evento di inizio del drag and drop

L'evento dragstart indica il verificarsi di un'azione di trascinamento. In corrispondenza di questo evento possiamo definire quale informazione associare al trascinamento:

var img = document.getElementById("miaImmagine");  
img.ondragstart = function(e) {
	e.dataTransfer.setData("text", e.target.id);
}

Come possiamo vedere dall'esempio, abbiamo utilizzato la proprietà dataTransfer dell'evento per creare il data payload da affidare al trascinamento.

Il metodo setData() consente di specificare l'informazione da trasportare verso l'elemento target del drag and drop. Questo metodo prevede due parametri: il primo indica il tipo di dato mentre il secondo indica l'informazione vera e propria. Nel nostro caso abbiamo specificato che vogliamo trasferire un'informazione di tipo testo e che l'informazione trasferita è l'identificatore dell'elemento che stiamo trascinando.

Impostare un elemento target

L'abilitazione di un elemento a fungere da elemento target dell'operazione di drag and drop viene effettuata assegnando un gestore all'evento dragover, come mostrato nel seguente esempio:

var divTarget = document.getElementById("divTarget");  
divTarget.ondragover = function(e) {
	e.target.className = "overClass";
	e.preventDefault();
}

In questo caso evidenziamo l'elemento target assegnandogli una classe CSS e disabilitiamo il comportamento predefinito del browser. Quest'ultima operazione è fondamentale per l'abilitazione dell'elemento target, altrimenti il browser non consentirebbe il rilascio (drop) dell'elemento trascinato.

drop, l'evento per il rilascio

Infine gestiamo l'ultima fase dell'operazione gestendo l'evento drop:

divTarget.ondrop = function(e) {   
	var data = e.dataTransfer.getData("text");
	e.target.appendChild(document.getElementById(data));
}

In questa fase recuperiamo il data payload tramite il metodo getData() della proprietà dataTransfer dell'evento ed appendiamo l'elemento corrispondente all'interno del nostro <div> target.

Eventi avanzati per il drag and drop

In certi casi il browser ha dei comportamenti predefiniti in corrispondenza dell'evento drop. Ad esempio, quando l'elemento target è un link il comportamento predefinito è l'apertura della pagina corrispondente. In questi casi è opportuno inibire il comportamento predefinito eseguendo il metodo preventDefault() dell'evento.

Quelle che abbiamo illustrato sono le operazioni di base per gestire il drag and drop di un elemento. È possibile personalizzare maggiormanete l'operazione creando ad esempio effetti grafici sfruttando altre le funzionalità che abbiamo a disposizione. Ad esempio, sono previsti i seguenti tre eventi aggiuntivi che ci consentono di avere una granularità maggiore nel controllo dell'operazione:

Evento	Descrizione
dragenter	si verifica quando l'elemento trascinato entra nell'area occupata dall'elemento target
dragleave	si verifica quando l'elemento trascinato lascia l'area occupata dall'elemento target
dragend	si verifica quando l'elemento trascinato è stato rilasciato

In corrispondenza di questi eventi possiamo modificare l'aspetto grafico degli elementi coinvolti nell'operazione per dare un riscontro visivo all'utente. Ad esempio possiamo evidenziare l'elemento su cui è possibile fare il drop quando entriamo nell'area occupata dall'elemento target e ristabilire il suo aspetto originale quando ne usciamo.

Possiamo ulteriormente personalizzare il feedback grafico da dare all'utente durante il drag and drop sfruttando anche la proprietà dataTransfer dell'evento. Ad esempio, possiamo fornire indicazioni al browser sul tipo di operazione associata al drag and drop tramite la proprietà dataTransfer.dropEffect, in modo tale che venga visualizzata un'icona adeguata durante il trascinamento. Oppure possiamo specificare noi un'icona personalizzata tramite il metodo dataTransfer.setDragImage().

Per ulteriori approfondimenti fare riferimento alle specifiche ufficiali.