HTML5 Drag and Drop (Italiano)

Da HTML5 è possibile trascinare e rilasciare elementi HTML all’interno di una pagina HTML. Tramite JavaScript event listener puoi decidere cosa succede quando l’utente trascina e rilascia elementi.

Durante il drag and drop gli elementi HTML possono assumere due ruoli:

1. Trascinabile
2. Drop target / drop zone.

L’elemento trascinabile è l’elemento che l’utente dovrebbe essere in grado di trascinare nella pagina HTML e rilasciare da qualche parte, affinché si verifichi un’azione. Questo può essere uno o più elementi.,

Il drop target o drop zone è l’elemento su cui vengono rilasciati gli elementi trascinabili.

Trascina e rilascia eventi

Per controllare cosa succede quando si trascinano e rilasciano elementi HTML, è necessario eseguire 3 passaggi:

1. Impostare gli elementi HTML su trascinabili.,
2. Allega gli ascoltatori di eventi agli elementi HTML trascinabili
3. Allega gli ascoltatori di eventi agli elementi HTML di destinazione

Gli eventi e gli attributi sono illustrati qui:

Per prima cosa si imposta l’attributodraggable="true" sugli elementi HTML per renderlo trascinabile.

In secondo luogo si associano gli ascoltatori di eventi sull’elemento trascinabile per gli eventi dragstart e dragend., All’interno di questi listener di eventi è possibile implementare ciò che deve accadere quando l’utente inizia a trascinare l’elemento e quando il trascinamento termina.

In terzo luogo si associano gli ascoltatori di eventi sull’elemento drop target. Gli eventi che puoi ascoltare sono dragenter, dragover, dragleave e drop.

L’evento dragenter viene attivato quando l’utente trascina il trascinabile sul bersaglio di rilascio., Questo evento si attiva solo quando l’elemento trascinabile passa dall’essere esterno all’essere finito, che in genere è determinato dalla posizione del cursore del mouse.

Una volta che l’elemento trascinabile si trova sopra il bersaglio di rilascio, l’eventodragover si attiva e continua a sparare per tutto il tempo in cui l’elemento trascinabile viene trascinato sopra il bersaglio di rilascio.

Se l’utente trascina nuovamente l’oggetto trascinabile fuori dal target di rilascio, viene attivato l’evento dragleave.

Se l’utente rilascia l’oggetto trascinabile sulla destinazione di rilascio, l’evento drop viene attivato.,

Esempio di evento drag and Drop

Ecco un esempio con cui puoi giocare. Prova a trascinare il logo HTML5 sul drop target e guarda cosa succede. Prova a far cadere l’immagine e trascinarla di nuovo.

Trascinare e Rilasciare il Codice

diamo uno sguardo a come gestire gli eventi di trascinamento., Per vedere che creeremo prima un<img> elemento che possiamo trascinare. Ecco il codice HTML per questo:

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

Una volta che abbiamo un elemento trascinabile abbiamo bisogno di un drop target. Userò un elemento<div>:

<div style="width: 200px; height: 200px;">Drop here</div>

Una volta che abbiamo l’elemento trascinabile e l’elemento drop target, dobbiamo collegare gli ascoltatori di eventi., Ecco il codice JavaScript per questo:

La funzionedragStart() chiama event.dataTransfer.setData() per impostare i dati che vengono trasferiti al drop target quando l’elemento viene eliminato. Qualunque siano i dati necessari per completare correttamente l’azione di rilascio, impostalo qui. Si impostano sia i dati che il tipo mime.

I gestori di eventi dragOver() e drop() chiamano entrambi event.preventDefault() e restituiscono false. Questo è necessario per far funzionare correttamente il drag and drop., Il browser potrebbe avere un comportamento di trascinamento predefinito che è necessario disabilitare per far funzionare il codice.

Si noti inoltre che la funzionedrop() gestore eventi legge il set di dati indragStart() tramite la chiamata aevent.dataTransfer.getData(). Passa il tipo mime dei dati come parametro per estrarlo correttamente.

Questo è tutto ciò che è necessario per implementare il drag and drop in HTML5. Puoi renderlo un po ‘ più visivamente piacevole, come vedremo nella prossima sezione.,

Feedback visivo

È possibile utilizzare le funzioni di gestione eventi drag and drop per fornire all’utente un feedback visivo più esplicito.

Prima di tutto, puoi contrassegnare l’elemento che viene trascinato in modo che l’utente possa vedere quale elemento sta trascinando. Se più elementi hanno lo stesso aspetto e possono essere trascinati tutti, è bello per l’utente vedere quale viene trascinato. È possibile farlo in risposta all’eventodragstart. Ecco un esempio:

Una volta terminato il trascinamento, vogliamo rimuovere nuovamente il bordo., Questo viene fatto in risposta all’eventodragend. Ecco come è fatto:

Ora l’utente riceverà un feedback visivo che mostra quale elemento viene trascinato.

Vogliamo anche mostrare all’utente che è possibile rilasciare l’elemento trascinabile quando viene trascinato sul bersaglio di rilascio. Di nuovo cambieremo il bordo dell’elemento. Lo faremo in risposta agli eventidragenter,dragleave edrop., Ecco come è fatto:

Ora il bordo del drop target diventerà verde e tratteggiato quando l’elemento trascinabile viene trascinato su di esso. Il bordo verrà rimosso quando l’elemento trascinabile viene trascinato di nuovo o se l’elemento viene rilasciato sulla destinazione di rilascio.

L’esempio sopra non mostrava la funzione di gestione eventi dragOver(), ma assicurati di aggiungerla per evitare il comportamento predefinito del browser.,

Ecco il codice completo dopo che è stato aggiunto il feedback visivo:

L’oggetto DataTransfer, effectsAllowed, dropEffect e setDragImage ()

È possibile aumentare il feedback visivo dato all’utente durante le azioni di drag and drop utilizzando l’oggettoDataTransfer. L’oggettoDataTransfer ha 2 attributi e una funzione che è possibile utilizzare per questo scopo., Questi sono:

• effectsAllowed
• dropEffect
• setDragImage()

Si ha accesso a il DataTransfer oggetto dragstart e drop oggetti evento. Ecco un esempio: dragstart listener funzione che imposta il effectsAllowed proprietà DataTransfer oggetto:

effectsAllowed proprietà viene utilizzato dal browser per modificare il cursore del mouse per mostrare che tipo di azione che viene eseguita quando si trascina un elemento., In genere il cursore del mouse cambia quando l’elemento trascinato si trova su un target drop. Non prima. I valori validi per il effectsAllowed proprietà sono:

• nessuno
• copia
• trasferimento
• copyMove
• link
• linkMove
• copyLink
• tutti
• non inizializzata

dropEffect dovrebbe mostrare all’utente (tramite il cursore) cosa succede quando il mouse passa sopra una goccia di destinazione, ma al momento della scrittura (feb. 2014) i browser sembrano ignorare questo., I valori validi per il dropEffect proprietà sono:

• nessuno
• copia
• link
• trasferimento

setDragImage(image, x, y) funzione può essere utilizzata per impostare l’immagine visualizzata dal browser quando l’utente trascina un elemento. Per impostazione predefinita, il browser mostra una copia semitrasparente dell’elemento originale, ma se si desidera un’immagine diversa, è possibile impostare un’immagine diversa utilizzando questa funzione. Le proprietàx ey possono essere utilizzate per impostare gli offset di posizione per l’immagine quando viene visualizzata., Per impostazione predefinita, l’angolo in alto a sinistra dell’immagine di trascinamento si trova sulla punta del puntatore del mouse. Impostando diverse proprietà x e y è possibile modificarlo. È possibile utilizzare gli offset positivi o negativi x e y.

Ecco un esempio di codice che mostra come impostare un’immagine di trascinamento all’interno della funzionedragStart() event listener:

Ecco un esempio che ti permette di giocare con le varie impostazioni sull’oggettoDataTransfer., Prova a cambiareeffectsAllowed e trascina l’immagine e vedi cosa succede quando trascini il logo HTML5 verso il basso suldiv drop target.

Trascinare i File Nel Browser

è possibile trascinare i file nel browser dal file system, e leggere il nome e il contenuto del trascinato i file da JavaScript. Lo fai tramite l’API del file HTML5., Ecco un listener di destinazione drop che rileva il nome del file del file trascinato:

var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i 
 Notice how the 
 function does not call the 
 function, but instead accesses the 
 property of the 
. The 
 property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon).
 You can read more about how to access the dragged files in my HTML5 file API tutorial.