L'API HTML5 drag-and-drop (DnD) significa che quasi qualsiasi elemento di una pagina può diventare trascinabile. In questo articolo copreremo le basi del drag and drop.
Crea contenuti trascinabili
Vale la pena notare che nella maggior parte dei browser, selezioni di testo, immagini e link sono trascinabili di default. Ad esempio, se trascini il logo di Google su Google Search, vedrai un'immagine fantasma. L'immagine può poi essere trascinata e inserita nella barra degli indirizzi, nell'elemento <input type="file" />, o anche sul desktop. Per rendere altri tipi di contenuti trascinabili, devi usare l'API HTML5 DnD.
Per rendere un oggetto trascinabile, imposta l'elementotrascinabile=vero。 Il trascinamento può essere supportato per quasi qualsiasi elemento, inclusi immagini, file, link, file o qualsiasi markup su una pagina.
Nel nostro esempio, creeremo un'interfaccia per riorganizzare alcune colonne, che sono state disposte tramite CSS Grid. Il markup di base per queste colonne è mostrato qui sotto, con la proprietà trascinabile impostata su vera per ogni colonna.
Ecco il CSS per i miei elementi contenitori e scatole. Si noti che l'unico CSS relativo alla funzionalità di DnD è la proprietà cursor: move. Il resto del codice controlla solo la disposizione e lo stile degli elementi del container e della scatola.
A questo punto, vedrai che puoi trascinare l'oggetto ma non succederà altro. Per aggiungere funzionalità di DnD, dobbiamo usare l'API JavaScript.
Ascolta gli eventi drag
Molti eventi diversi possono essere collegati per monitorare l'intero processo di trascinamento e rilascio.
- Dragstart
- trascinare
- Dragatore
- Dragleave
- Dragover
- goccia
- Dragend
Per elaborare uno stream di DnD, serve un elemento sorgente (il punto di partenza del drag), il payload dati (quello che stai cercando di posizionare) e il bersaglio (l'area dove viene posizionato lo snap). Gli elementi sorgente possono essere immagini, elenchi, link, oggetti file, blocchi HTML, ecc. L'obiettivo è accettare la drop zone (o il set di drop zone) dei dati che l'utente sta cercando di inserire. Tieni presente che non tutti gli elementi possono essere obiettivi, ad esempio, le immagini non possono essere obiettivi.
Inizia e termina la sequenza di trascinamento e rilascio
Dopo aver definito la proprietà draggable="true" sul contenuto, allega un gestore di eventi dragstart per avviare la sequenza DnD per ogni colonna.
Questo codice imposterà l'opacità della colonna al 40% quando l'utente inizia a trascinare, e poi la riporterà al 100% alla fine dell'evento di trascinamento.
I risultati possono essere visti nella demo Glitch qui sotto. Trascina un oggetto e diventerà opaco. Poiché l'evento di dragstart mira all'elemento sorgente, impostare this.style.opacity al 40% fornisce all'utente un feedback visivo che l'elemento attualmente selezionato si sta muovendo. Dopo che l'elemento è stato posizionato, l'elemento sorgente torna al 100% di opacità, anche se la funzione di posizionamento non è ancora stata scritta.
Usa dragenter, dragover e dragleave per aggiungere ulteriori segnali visivi
Per aiutare gli utenti a capire come interagire con la tua interfaccia, usa i gestori di eventi dragenter, dragover e dragleave. Nel seguente esempio, le colonne possono essere trascinate o mirate. Per aiutare gli utenti a capire questo, quando trascina un elemento oltre una colonna, il bordo di quella colonna diventa una linea tratteggiata. Ad esempio, puoi creare una overclass in CSS per rappresentare un elemento che è un target di posizionamento:
Poi, configura un gestore di eventi in JavaScript per aggiungere la classe over quando si trascina oltre una colonna e rimuoverla quando se ne va. Nel handler di dragend, vogliamo anche assicurarci che la classe venga rimossa alla fine del drag.
Ci sono alcuni punti da menzionare in questo codice:
Quando trascini un elemento come un link, devi bloccare il comportamento predefinito del browser, che è navigare verso quel link. Per farlo, chiama e.preventDefault() nell'evento dragover. Un'altra buona pratica è restituire false nello stesso handler.
Usa il gestore di eventi dragenter per cambiare classe, non dragover. Se usi dragover, la classe CSS viene attivata più volte perché il dragover evento continua a attivarsi quando la colonna si posiziona in l'hwa. Alla fine, questo farà sì che il renderer del browser faccia molti lavori inutili. È meglio mantenere sempre il ridisegno al minimo. Se per qualche motivo devi usare gli eventi dragover, considera di limitare o rimuovere gli ascoltatori degli eventi.
Completa il piazzamento
Per gestire la posizione effettiva, aggiungi un ascoltatore evento per l'evento di abbandono. In un drop handler, devi bloccare il comportamento di posizionamento predefinito del browser, che di solito è un fastidioso reindirizzamento. può essere chiamato e.stopPropagation() per impedire che l'evento attivi il DOM.
Assicurati di registrare il nuovo handler nell'altro handler:
Se esegui il codice in questo momento, il progetto non verrà collocato in una nuova posizione. Per ottenere questo risultato, è necessario utilizzare un oggetto DataTransfer.
La proprietà dataTransfer è il luogo dove avvengono tutte le meraviglie di DnD. Salva i frammenti di dati inviati durante l'operazione di trascinamento. dataTransfer è impostato nell'evento di avvio e viene letto/elaborato nell'evento di drop. Chiama e.dataTransfer.setData(mimeType, dataPayload) per impostare il tipo MIME e il payload dati dell'oggetto.
Nel seguente esempio, permetteremo agli utenti di riorganizzare l'ordine delle colonne. Per farlo, prima devi memorizzare l'HTML dell'elemento sorgente all'inizio del trascinamento:
Gestisci la posizione delle colonne nell'evento drop, imposta l'HTML della colonna sorgente su quello della colonna di destinazione in cui è posizionata, prima verifica che la colonna di destinazione trascinata e lasciata dall'utente sia la stessa della colonna sorgente.
Ulteriori proprietà di resistenza
L'oggetto dataTransfer espone proprietà che vengono utilizzate per fornire un feedback visivo all'utente durante il processo di trascinamento. Queste proprietà possono anche essere utilizzate per controllare come ogni target di posizionamento risponde a specifici tipi di dati.
- dataTransfer.effectAllowed limita il "tipo di trascinamento" che un utente può eseguire su un elemento. Viene utilizzato nel modello di gestione drag-and-drop per inizializzare dropEffect durante eventi dragenter e dragover. Questa proprietà può essere impostata ai seguenti valori: none, copy, copyLink, copyMove, link, linkMove, move, all e uninitialized.
- dataTransfer.dropEffect controlla il feedback fornito all'utente durante gli eventi di dragenter e dragover. Quando l'utente si sposta sopra l'elemento di destinazione, il cursore del browser indicherà il tipo di azione da eseguire (ad esempio, copia, spostamento, ecc.). L'effetto può essere uno dei seguenti valori: nessuno, copia, collega, spostati.
- e.dataTransfer.setDragImage(imgElement, x, y) indica che il feedback predefinito "ghost image" del browser non viene utilizzato, ma invece c'è un'opzione per impostare l'icona trascina.
Carica file trascinando e rilascando
Il seguente esempio semplice utilizza una colonna come sorgente di trascinamento e bersaglio di trascinamento. Questo può essere visto nell'interfaccia utente quando all'utente viene chiesto di riorganizzare gli elementi. In alcuni casi, trascinare il bersaglio e trascinare la sorgente può essere diverso, ad esempio in un'interfaccia in cui l'utente deve selezionare un'immagine come immagine principale del prodotto trascinando l'immagine selezionata sul bersaglio.
Il drag and drop viene spesso utilizzato per permettere agli utenti di trascinare elementi dal desktop all'interno dell'app. La differenza principale è il responsabile delle consegne. Senza utilizzare dataTransfer.getData() per accedere al file, i dati del file saranno inclusi nella proprietà dataTransfer.files:
Link originale:Il login del link ipertestuale è visibile.
|
Pubblicato il 26-04-2022 alle 10:30:50
|
|
|
|
Pubblicato il 26-04-2022 21:27:25
|
