Sommario
Già nella prima parte di questo tutorial abbiamo visto come avviare il evento di trascinamento di trascinare gli elementi, cioè abbiamo fatto una parte del lavoro, abbiamo visto come interagire con i diversi eventi di quella prima sezione.Ora dobbiamo sapere come attivare l'area dove depositare l'elemento, è già l'azione complementare che ci permetterà di ottenere funzionalità complete sulla nostra pagina.
Creazione dell'area di deposito
Questa è l'area in cui lasceremo gli elementi che trasciniamo, per manipolare quest'area avremo diversi eventi, per capire meglio come gestire questi eventi elencheremo ognuno e spiegheremo come funziona .
Eventi (modifica)
- Dragenter: Si attiva quando un elemento trascinato entra nello spazio sullo schermo che abbiamo definito per l'area di deposito.
- Trascinare sopra: Viene attivato quando l'elemento trascinato si sposta all'interno dell'area di deposito che abbiamo già definito.
- Dragleave: Si attiva nel momento in cui un elemento trascinato lascia l'area di deposito.
- Far cadere: È l'evento che si attiva quando un articolo viene lasciato nell'area di deposito.
Una volta che sappiamo quali eventi abbiamo a nostra disposizione, costruiremo un semplice codice, in cui quando si rilascia o si deposita un elemento che abbiamo trascinato, viene visualizzato nell'area di deposito.
Per questo useremo alcune funzioni del HTML interno dove andremo a clonare l'elemento che viene lanciato nell'area.
Vediamo il codice di esempio:
Esempio
Rilascia qui
Se osserviamo da vicino, definiamo l'elemento target come l'elemento che conterrà l'area di deposito, una volta fatto ciò definiamo cosa accadrà in ciascuno degli eventi, se osserviamo il evento di rilascio è dove avviene il passaggio finale, qui cloneremo l'elemento trascinato e grazie al HTML interno lo mostreremo in modo asincrono quando rilasceremo l'elemento che abbiamo trascinato.
Un'altra cosa a cui dobbiamo prestare attenzione è sovrascrivere l'evento predefinito del browser, lo gestiamo durante la creazione della funzione handleTrascinaIn questo modo, impediamo al browser di interpretare le istruzioni in un modo non previsto da noi.
Nel nostro browser dovrebbe apparire così:
