Come trascinare e rilasciare elementi HTML e file utilizzando Javascript
Per definire un effetto drop, è necessario seguire i seguenti passaggi:
5.1. Determinare gli effetti drop consentiti sull’elemento trascinabile nel gestore eventi dragstart
Utilizzando la proprietà effectAllowed sulla proprietà evento dataTransfer, è possibile definire tutti gli effetti drop che possono essere applicati per quell’elemento trascinabile.
Questo viene fatto in quanto è possibile definire diverse posizioni di rilascio e gestire diversi effetti di rilascio per posizione di rilascio.,
La seguente tabella definisce la possibile effectAllowed valori di proprietà basato su MDN documenti:
5.2. Per ogni posizione di rilascio, definire l’effetto di rilascio per esso nel suo gestore di eventi dragover
L’effetto di rilascio da definire deve essere uno degli effetti consentiti determinati nel gestore di eventi dragstart della posizione di origine.,
Quando un effetto drop non è uno degli effetti drop consentiti, verrà impostato su uno degli effetti drop consentiti.
Il gestore dragover, dove deve essere definito l’effetto drop, viene eseguito quando l’elemento trascinato viene trascinato su una possibile posizione di drop.
Di seguito è riportato un esempio di definizione degli effetti di rilascio per una particolare posizione di rilascio.
6) Definire una zona di rilascio (posizione di rilascio)
Per impostazione predefinita, nessun elemento nel documento HTML consente un rilascio., Tuttavia, questo può essere modificato e per rendere un elemento una zona di rilascio, deve avere:
- Il gestore di eventi ondragover, che viene eseguito quando l’elemento trascinabile viene trascinato su questo elemento. In questo gestore di eventi, l’effetto di rilascio della posizione di rilascio è definito come precedentemente menzionato nel passaggio 5.2.
- Il gestore di eventi ondrop, che viene eseguito quando l’elemento trascinabile viene rilasciato nella posizione / zona di trascinamento.
Il seguente è un esempio di definizione di un elemento come una posizione di rilascio.,
In entrambi i gestori di eventi dragover e drop, preventDefault() deve essere chiamato per consentire una goccia in quanto indica che una goccia è consentita in quella posizione.
Se un drop sarà consentito solo in determinate situazioni in cui vengono utilizzate le condizioni, aggiungere preventDefault solo se sono soddisfatte le condizioni per consentire un drop. Questo viene fatto per evitare che l’elemento sia una zona di rilascio se le condizioni non sono soddisfatte in cui la goccia non dovrebbe essere consentita.,
Rifiutare un drop in base al tipo di dati di trascinamento nella proprietà dataTransfer è un caso comune. L’esempio seguente dimostra che consentendo solo i collegamenti da eliminare nell’elemento drop zone che ha il gestore dragover.
7) Gestire il Drop dell’elemento
Durante l’evento drop, i dati di trascinamento devono essere elaborati. Per fare ciò, viene utilizzato il metodo getData() sulla proprietà dell’evento dataTransfer.,
Il metodo getData() recupera gli elementi di trascinamento poiché richiede un singolo argomento del tipo di dati da recuperare e restituirà il valore della stringa ad esso associato.
Le proprietà allowedEffect e dropEffect aiutano a controllare il feedback che verrà presentato all’utente.
La gestione di tale feedback è responsabilità dello sviluppatore e dovrebbe essere implementata nel gestore di eventi drop. Ad esempio, il recupero di un elemento e l’aggiunta a un altro genitore lo sposteranno, ma la copia del nodo genererà un effetto di copia.,
Se sono definiti più effetti di rilascio per una singola zona di rilascio, la proprietà dropEffect deve essere utilizzata per determinare quale operazione di trascinamento è stata desiderata per questo particolare evento di rilascio.
Il seguente è un esempio di gestione di una goccia.
A volte, potresti aver supportato diversi tipi degli stessi dati ma vuoi solo recuperare il tipo più specifico. Il seguente codice dei documenti MDN lo dimostra.,
8) Utilizzare l’evento di trascinamento per verificare se il rilascio ha avuto successo
Al termine di un’operazione di trascinamento, un evento di trascinamento viene attivato sull’elemento sorgente. L’evento si attiva se il trascinamento ha avuto successo o è stato annullato.
Per verificare se l’operazione di trascinamento ha avuto successo o meno, il valore di dropEffect può essere controllato come segue:
- Se il valore della proprietà dropEffect è “none” nel gestore di eventi dragend, significa che le operazioni di trascinamento sono state annullate.,
- Altrimenti, il valore della proprietà dropEffect è l’operazione eseguita correttamente.
Hmm, quindi come è utile?
L’elemento sorgente può utilizzare queste informazioni dopo un’operazione di spostamento riuscita per rimuovere l’elemento trascinato dalla vecchia posizione.
Demo sul trascinamento dell’elemento HTML & Drop
Nota: puoi anche clonare il progetto dal mio Github qui.,
1) Detect the Drag & Drop Feature Support in Your Browser
Before using the HTML drag & drop API, add feature detection code to ensure browser support.
The following code is the feature detection code for the HTML drag & drop API from Modernizr.,
2) Definire una zona di rilascio (posizione di rilascio)
Per impostazione predefinita, nessun elemento nel documento HTML consente un rilascio. Tuttavia, questo può essere modificato e per rendere un elemento una zona di rilascio, deve avere:
- Il gestore di eventi ondragover, che viene eseguito quando i file vengono trascinati sulla posizione di rilascio.
- Il gestore di eventi ondrop, che viene eseguito quando i file sono / vengono rilasciati nella posizione di rilascio.,
Come dichiarato da MDN docs:
gli eventi dragstart e dragend non vengono attivati quando si trascina un file nel browser dal sistema operativo.
Il seguente è un esempio per definire un elemento come una posizione di rilascio.
3) Gestire il Drop del file
Quando l’utente rilascia i file in una zona di drop, verrà attivato un evento drop. Durante l’evento di rilascio, i file devono essere elaborati come desiderato.,
Per accedere a ciascun file eliminato, utilizzare la proprietà DataTransfer dell’evento per accedere alla proprietà files. Dopo aver effettuato l’accesso a un file eliminato, utilizzare l’API File per elaborarlo.
Se il browser supporta la proprietà DataTransferItemList, è possibile utilizzarla con il metodo getAsFile() invece di utilizzare la proprietà DataTransfer per accedere al file.
Sia nel dragover che nei gestori di eventi drop, preventDefault() deve essere chiamato per consentire una goccia poiché indica che una goccia è consentita in quella posizione., Inoltre impedisce l’apertura del file, che è il comportamento predefinito che si verifica quando si rilascia un file in una pagina Web.
Se un drop sarà consentito solo in determinate situazioni in cui vengono utilizzate le condizioni, aggiungere preventDefault solo se sono soddisfatte le condizioni per consentire un drop. Questo viene fatto per evitare che l’elemento sia una zona di rilascio se le condizioni non sono soddisfatte in cui la goccia non dovrebbe essere consentita.
Il seguente esempio, da documenti MDN, dimostra l’elaborazione di file eliminati, in cui un elemento di trascinamento che non è un file viene ignorato., Both possible ways are demonstrated in this
Demo on HTML Element’s Drag & Drop
Note: you can also clone the project from my Github here.