HTML5 – Trascina e rilascia
Drag and Drop (DnD) è un potente concetto di interfaccia utente che rende facile copiare, riordinare e cancellare di elementi con l’aiuto dei clic del mouse. Ciò consente all’utente di fare clic e tenere premuto il pulsante del mouse su un elemento, trascinarlo in un’altra posizione e rilasciare il pulsante del mouse per rilasciare l’elemento.
Per ottenere la funzionalità di trascinamento della selezione con HTML4 tradizionale, gli sviluppatori avrebbero dovuto utilizzare una programmazione JavaScript complessa o altri framework JavaScript come jQuery ecc.
Ora HTML 5 ha creato un’API Drag and Drop (DnD) che porta il supporto DnD nativo alla creazione del browser è molto più facile programmare.
HTML 5 DnD è supportato da tutti i principali browser come Chrome, Firefox 3.5 e Safari 4 ecc.
Drag and Drop Events
Ci sono un certo numero di eventi che vengono attivati durante le varie fasi dell’operazione di trascinamento della selezione. Questi eventi sono elencati di seguito:
| Sr.No. | Eventi & Descrizione |
|---|---|
| 1 |
dragstart Si attiva quando l’utente inizia a trascinare l’oggetto. |
| 2 |
dragenter Attivato quando il mouse viene spostato per la prima volta sull’elemento di destinazione durante un trascinamento. Un listener per questo evento dovrebbe indicare se è consentito il rilascio su questa posizione. Se non ci sono listener o i listener non eseguono alcuna operazione, per impostazione predefinita non è consentita la rimozione. |
| 3 |
dragover Questo evento viene generato quando il mouse viene spostato su un elemento quando si verifica un trascinamento. La maggior parte delle volte, l’operazione che si verifica durante un listener sarà la stessa dell’evento dragenter. |
| 4 |
dragleave Questo evento viene generato quando il mouse lascia un elemento durante un trascinamento. Gli ascoltatori dovrebbero rimuovere l’evidenziazione o gli indicatori di inserimento utilizzati per rilasciare feedback. |
| 5 |
trascina Si attiva ogni volta che il mouse viene spostato mentre l’oggetto viene trascinato. |
| 6 |
drop L’evento di rilascio viene generato sull’elemento in cui si è verificato il rilascio al termine dell’operazione di trascinamento. Un ascoltatore sarebbe responsabile del recupero dei dati trascinati e dell’inserimento nel punto di rilascio. |
| 7 |
dragend Si attiva quando l’utente rilascia il pulsante del mouse durante il trascinamento di un oggetto. |
Nota – Nota che vengono attivati solo gli eventi di trascinamento; gli eventi del mouse come mousemove non vengono attivati durante un’operazione di trascinamento.
L’oggetto DataTransfer
I metodi del listener di eventi per tutti gli eventi di trascinamento della selezione accettano l’oggetto Evento che ha un attributo di sola lettura chiamato dataTransfer.
L’event.dataTransfer restituisce l’oggetto DataTransfer associato all’evento come segue:
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
L’oggetto DataTransfer contiene i dati sul trascinamento e l’operazione di caduta. Questi dati possono essere recuperati e impostati in termini di vari attributi associati all’oggetto DataTransfer come spiegato di seguito –
| Sr.No. | Attributi DataTransfer e loro descrizione |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Restituisce un DOMStringList che elenca i formati che sono stati impostati nell’evento dragstart. Inoltre, se vengono trascinati file, uno dei tipi sarà la stringa “File”. |
| 4 |
dataTransfer.clearData () Rimuove i dati dei formati specificati. Rimuove tutti i dati se l’argomento viene omesso. |
| 5 |
dataTransfer.setData (formato, dati) Aggiunge i dati specificati. |
| 6 |
data = dataTransfer.getData (formato) Restituisce i dati specificati. Se non sono presenti tali dati, restituisce la stringa vuota. |
| 7 |
dataTransfer.files Restituisce un FileList dei file trascinati, se presenti. |
| 8 |
dataTransfer.setDragImage (element, x, y) Utilizza l’elemento dato per aggiornare il feedback di trascinamento, sostituendo qualsiasi feedback specificato in precedenza. |
| 9 |
dataTransfer.addElement (element) Aggiunge l’elemento specificato al elenco di elementi utilizzati per visualizzare il feedback di trascinamento. |
Processo di trascinamento
Di seguito sono i passaggi da eseguire per implementare l’operazione di trascinamento –
Passaggio 1 – Rendere trascinabile un oggetto
Ecco i passaggi da eseguire –
-
Se vuoi trascinare un elemento, devi impostare l’attributo trascinabile su true per quell’elemento.
-
Imposta un listener di eventi per dragstart che s controlla i dati trascinati.
-
Il dragstart del listener di eventi imposterà gli effetti consentiti (copia, spostamento, collegamento o qualche combinazione).
Di seguito è riportato l’esempio per rendere un oggetto trascinabile –
Questo produrrà il seguente risultato –
Passaggio 2 – Rilascio dell’oggetto
Per accettare un rilascio, il target di rilascio deve ascoltare almeno tre eventi.
-
L’evento dragenter, che viene utilizzato per determinare se il target di rilascio deve accettare o meno il rilascio . Se il rilascio deve essere accettato, questo evento deve essere annullato.
-
L’evento dragover, che viene utilizzato per determinare quale feedback deve essere mostrato all’utente. Se l’evento viene annullato, il feedback (in genere il cursore) viene aggiornato in base al valore dell’attributo dropEffect.
-
Infine, l’evento drop, che consente il calo effettivo da eseguire.
Di seguito è riportato l’esempio per rilasciare un oggetto in un altro oggetto –
Questo produrrà il seguente risultato –