Introduzione
Il trascinamento è uninterazione utente comune che puoi trovare in molte interfacce utente grafiche.
Esistono librerie JavaScript preesistenti per laggiunta di una funzione di trascinamento della selezione alla tua app. Tuttavia, potrebbero verificarsi situazioni in cui una libreria non è disponibile o introduce un sovraccarico o una dipendenza di cui il progetto non ha bisogno. In queste situazioni, la conoscenza delle API disponibili nei browser web moderni può offrire soluzioni alternative.
LAPI Drag and Drop HTML si basa sul modello di eventi del DOM per ottenere informazioni su ciò che viene trascinato o rilasciato e per aggiornare quellelemento trascinando o rilasciando. Con i gestori di eventi JavaScript, puoi trasformare qualsiasi elemento in un elemento trascinabile o in un elemento in cui rilasciare.
In questo tutorial, creeremo un esempio di trascinamento utilizzando il trascinamento della selezione HTML API con JavaScript vanilla per utilizzare i gestori di eventi.
Prerequisiti
Per completare questo tutorial, avrai bisogno di:
- Un browser web moderno che supporti lAPI Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Passaggio 1: creazione del progetto e markup iniziale
Il nostro progetto consisterà in un contenitore con due tipi di elementi figlio:
- Elementi figlio che puoi trascinare
- Elementi figlio in cui possono essere inseriti elementi
Per prima cosa, apri la finestra del tuo terminale e crea una nuova directory del progetto:
Quindi, vai a quella directory:
Quindi, crea un index.html file in quella directory:
Successivamente, aggiungi il codice boilerplate per una pagina web HTML:
E tra i <body> aggiungono il tuo draggable elemento e il tuo dropzone (destinazione di rilascio):
Salva e chiudi il file. Quindi, crea un style.css file:
Successivamente, aggiungi stili per gli elementi nel nostro index.html file:
Questo aggiungerà un po di formattazione allapp. Ora puoi visualizzare index.html nel browser e osservare che questo produce un draggable <div> e a dropzone <div>.
Successivamente, renderemo esplicitamente il primo <div> trascinabile aggiungendo lattributo draggable:
Salva e chiudi il file.
Infine, visualizza di nuovo index.html nel browser. Se facciamo clic su draggable <div> e lo trasciniamo sullo schermo, dovrebbe esserci unindicazione visiva dello spostamento.
Il valore predefinito per lattributo draggable è auto. Ciò significa che se lelemento è trascinabile sarà determinato dal comportamento predefinito del browser. In genere questo significa che le selezioni di testo, immagini e collegamenti possono essere trascinati senza specificare draggable="true".
Ora hai un file HTML con un elemento trascinabile. Passeremo allaggiunta di gestori onevent.
Passaggio 2: gestione degli eventi di trascinamento con JavaScript
Attualmente, se rilascia il mouse mentre trascini lelemento trascinabile, non succede nulla. Per attivare unazione durante il trascinamento della selezione sugli elementi DOM, dobbiamo utilizzare lAPI Drag and Drop:
-
ondragstart: questo gestore di eventi verrà allegato al nostro elementodraggablee si attiverà quando si verifica un eventodragstart. -
ondragover: questo gestore di eventi verrà associato al nostro elementodropzonee si attiverà quando si verifica un eventodragover. -
ondrop: questo gestore di eventi verrà anche associato al nostro elementodropzonee si attiverà quando undropsi verifica un evento.
Nota. Ci sono otto gestori di eventi in totale: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart e ondrop. Per il nostro esempio, non li richiederemo tutti.
Innanzitutto, facciamo riferimento a un nuovo file https://www.digitalocean.com/community/tutorials/script.js nel nostro index.html:
Successivamente, crea un nuovo https://www.digitalocean.com/community/tutorials/script.js file:
Loggetto DataTransfer terrà traccia delle informazioni relative al trascinamento in corso. Per aggiornare il nostro elemento trascinando e rilasciando, dobbiamo accedere direttamente alloggetto DataTransfer.Per fare ciò, possiamo selezionare la proprietà dataTransfer dallelemento DOM DragEvent.
Nota: il DataTransfer loggetto può tecnicamente tenere traccia delle informazioni per più elementi trascinati contemporaneamente. Per il nostro esempio, ci concentreremo sul trascinamento di un elemento.
Il metodo dataTransfer delloggetto setData può essere utilizzato per impostare le informazioni sullo stato di trascinamento per lelemento attualmente trascinato. Richiede due parametri:
- una stringa che dichiara il formato del secondo parametro
- i dati effettivi trasferiti
Il nostro obiettivo è spostare il nostro elemento draggable in un nuovo elemento padre. Dobbiamo essere in grado di selezionare il nostro elemento draggable con un unico id. Possiamo impostare il id dellelemento trascinato con il metodo setData in modo che possa essere utilizzato in seguito.
rivisita il nostro file https://www.digitalocean.com/community/tutorials/script.js e crea una nuova funzione da utilizzare setData:
Nota: secondo quanto riferito, Internet Explorer da 9 a 11 ha problemi con lutilizzo di "text/plain". Il formato deve essere "text" per quel browser.
Per aggiornare lo stile CSS dellelemento trascinato, possiamo accedere ai suoi stili utilizzando nuovamente levento DOM e impostando gli stili desiderati per currentTarget.
Aggiungiamo alla nostra funzione e cambiamo backgroundColor in yellow:
Nota. Qualsiasi stile che modifichi dovrà essere aggiornato di nuovo manualmente al rilascio se desideri stili di solo trascinamento. Se modifichi qualcosa quando inizia il trascinamento, lelemento trascinato manterrà quel nuovo stile a meno che non lo cambi di nuovo.
Ora, abbiamo la nostra funzione JavaScript per quando inizia il trascinamento.
Possiamo aggiungere ondragstart allelemento draggable in index.html:
Visualizza index.html nel tuo browser. Se provi a trascinare il tuo oggetto ora, verrà applicato lo stile dichiarato nella nostra funzione:
Tuttavia, non accadrà nulla quando rilasci il clic.
Il gestore di eventi successivo attivato in questa sequenza è ondragover.
Il comportamento di rilascio predefinito per alcuni elementi DOM come <div> nei browser in genere non accetta leliminazione. Questo comportamento intercetterà il comportamento che stiamo tentando di implementare. Per assicurarci di ottenere il comportamento di rilascio desiderato, applicheremo preventDefault.
Rivisitiamo il file https://www.digitalocean.com/community/tutorials/script.js e crea una nuova funzione da utilizzare preventDefault. Aggiungi questo codice alla fine del file:
Ora, possiamo aggiungere ondragover al nostro elemento dropzone in index.html:
A questo punto, non abbiamo ancora scritto il codice per gestire il rilascio effettivo. Lultimo gestore di eventi attivato in questa sequenza è ondrop.
Rivediamo il nostro file https://www.digitalocean.com/community/tutorials/script.js e creiamo una nuova funzione .
Possiamo fare riferimento ai dati salvati in precedenza con il metodo dataTransfer delloggetto setData. Useremo il metodo dataTransfer delloggetto getData. I dati che abbiamo impostato erano id, quindi è quello che ci verrà restituito:
Seleziona il nostro elemento draggable con id che abbiamo recuperato:
Seleziona il nostro dropzone elemento:
Aggiungi il nostro draggable allelemento dropzone:
Reimposta il nostro dataTransfer oggetto:
Ora possiamo aggiungere ondrop al nostro elemento dropzone in index.html:
Una volta fatto, abbiamo una funzionalità di trascinamento della selezione completata. Visualizza index.html nel browser e trascina lelemento draggable su dropzone.
Il nostro esempio gestisce lo scenario di un singolo elemento trascinabile e un singolo obiettivo di rilascio. Puoi avere più elementi trascinabili, più destinazioni di rilascio e personalizzarli con tutti gli altri gestori di eventi dellAPI Drag and Drop.
Passaggio 3: creazione di un esempio avanzato con più elementi trascinabili
Ecco un altro esempio di come potresti utilizzare questa API: un elenco di cose da fare con attività trascinabili da cui puoi spostarti una colonna "To-do" a una colonna "Done".
Per creare il tuo elenco di cose da fare, aggiungi più elementi trascinabili con id s a index.html:
Visualizza index.html nel tuo browser e trascina gli elementi nella colonna Da fare nella colonna Fatto. Hai creato unapplicazione da fare e ne hai testato la funzionalità.
Conclusione
In questo articolo hai creato unapp da fare per esplorare la funzionalità di trascinamento della selezione che è disponibile per i browser web moderni.
LAPI Drag and Drop fornisce più opzioni per personalizzare le tue azioni oltre al trascinamento. Ad esempio, puoi aggiornare lo stile CSS degli elementi trascinati. Inoltre, invece di spostare lelemento, puoi scegliere di copiare lelemento trascinabile in modo che venga replicato al momento del rilascio.
Tieni presente che sebbene molti browser web supportino questa tecnologia, potresti non essere in grado di fare affidamento su di esso se il tuo pubblico è costituito da dispositivi che non supportano questa funzionalità.
Per ulteriori informazioni su tutto ciò che puoi rilasciare con lAPI Drag and Drop, controlla i documenti di MDN su di esso.