HTML5: trascina e rilascia
Drag and Drop (DnD) è un potente concetto di interfaccia utente che semplifica la copia, il riordino e l'eliminazione 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 lì.
Per ottenere la funzionalità di trascinamento della selezione con HTML4 tradizionale, gli sviluppatori dovrebbero utilizzare una programmazione JavaScript complessa o altri framework JavaScript come jQuery ecc.
Ora HTML 5 ha sviluppato un'API Drag and Drop (DnD) che porta il supporto DnD nativo al browser rendendo molto più semplice la creazione di codice.
HTML 5 DnD è supportato da tutti i principali browser come Chrome, Firefox 3.5 e Safari 4 ecc.
Trascina e rilascia eventi
Esistono numerosi eventi che vengono generati durante le varie fasi dell'operazione di trascinamento. Questi eventi sono elencati di seguito:
| Sr.No. | Eventi e descrizione |
|---|---|
| 1 | dragstart Viene eseguito 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 sono presenti listener o se i listener non eseguono alcuna operazione, per impostazione predefinita non è consentita l'eliminazione. |
| 3 | dragover Questo evento viene generato quando il mouse viene spostato su un elemento durante 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 qualsiasi evidenziazione o indicatore di inserimento utilizzato per il feedback di rilascio. |
| 5 | drag 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. |
Note- Nota che vengono attivati solo gli eventi di trascinamento; 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 Event oggetto che ha un attributo di sola lettura chiamato dataTransfer.
Il event.dataTransfer ritorna DataTransfer oggetto associato all'evento come segue:
function EnterHandler(event) {
DataTransfer dt = event.dataTransfer;
.............
}L' oggetto DataTransfer contiene i dati sull'operazione di trascinamento della selezione. 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 [ = value ]
|
| 2 | dataTransfer.effectAllowed [ = value ]
|
| 3 | dataTransfer.types Restituisce un DOMStringList che elenca i formati impostati nell'evento dragstart. Inoltre, se vengono trascinati file, uno dei tipi sarà la stringa "File". |
| 4 | dataTransfer.clearData ( [ format ] ) Rimuove i dati dei formati specificati. Rimuove tutti i dati se l'argomento viene omesso. |
| 5 | dataTransfer.setData(format, data) Aggiunge i dati specificati. |
| 6 | data = dataTransfer.getData(format) Restituisce i dati specificati. Se non ci sono 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 specificato per aggiornare il feedback di trascinamento, sostituendo qualsiasi feedback specificato in precedenza. |
| 9 | dataTransfer.addElement(element) Aggiunge l'elemento dato all'elenco di elementi utilizzati per eseguire il rendering del feedback di trascinamento. |
Processo di trascinamento della selezione
Di seguito sono riportati i passaggi da eseguire per implementare l'operazione Drag and Drop:
Passaggio 1: rendere trascinabile un oggetto
Ecco i passaggi da intraprendere:
Se vuoi trascinare un elemento, devi impostare il file draggable attribuire a true per quell'elemento.
Imposta un listener di eventi per dragstart che memorizza i dati trascinati.
L'ascoltatore di eventi dragstart imposterà gli effetti consentiti (copia, spostamento, collegamento o qualche combinazione).
Di seguito è riportato l'esempio per rendere un oggetto trascinabile:
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type = "text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>Questo produrrà il seguente risultato:
Passaggio 2: rilascio dell'oggetto
Per accettare un rilascio, il target di rilascio deve ascoltare almeno tre eventi.
Il dragenterevento, che viene utilizzato per determinare se l'obiettivo di rilascio deve accettare o meno il rilascio. Se la consegna deve essere accettata, questo evento deve essere annullato.
Il dragoverevento, 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, il drop evento, che consente di eseguire la caduta effettiva.
Di seguito è riportato l'esempio per rilasciare un oggetto in un altro oggetto:
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the purple box into the pink box.</div>
<div id="boxA" draggable="true" ondragstart="return dragStart(event)">
<p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
</center>
</body>
</html>Questo produrrà il seguente risultato: