Utilizzo dellAPI Drag and Drop HTML5

LAPI Drag and Drop (DnD) HTML5 significa che possiamo rendere trascinabile quasi ogni elemento della nostra pagina. In questo post spiegheremo le basi del Drag e rilascia.

Creazione di contenuto trascinabile #

Vale la pena notare che nella maggior parte dei browser, le selezioni di testo, le immagini e i collegamenti sono trascinabili per impostazione predefinita. Ad esempio, se trascini il Sul logo di Google in Ricerca Google vedrai limmagine fantasma. Limmagine può quindi essere rilasciata nella barra degli indirizzi, un elemento <input type="file" /> o persino sul desktop. Per rendere trascinabili altri tipi di contenuti è necessario utilizzare le API DnD HTML5.

Per rendere un oggetto trascinabile, impostare draggable=true su quellelemento. È possibile abilitare il trascinamento di qualsiasi cosa, immagini, file , link, file o qualsiasi markup sulla tua pagina.

Nel nostro esempio stiamo creando uninterfaccia per riorganizzare alcune colonne, che sono state disposte con CSS Grid. Il markup di base per le mie colonne ha il seguente aspetto questo, con ogni colonna che ha

attributo impostato sutrue.

Ecco il CSS per i miei elementi contenitore e box. Nota che lunico CSS correlata alla funzionalità DnD è la proprietà cursor: move. Il resto del codice controlla solo il layout e lo stile degli elementi contenitore e box.

A questo punto dovrai scopri che puoi trascinare gli elementi, ma non accadrà nientaltro.Per aggiungere la funzionalità DnD dobbiamo usare lAPI JavaScript.

Ascolto per trascinare eventi #

Ci sono un numero di diversi eventi a cui allegare per monitorare lintero processo di trascinamento.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

Per gestire il flusso DnD, è necessario un qualche tipo di elemento sorgente (da cui ha origine il trascinamento), i dati pa yload (cosa stai cercando di rilasciare) e un target (unarea per catturare il rilascio). Lelemento sorgente può essere unimmagine, un elenco, un collegamento, un oggetto file, un blocco di HTML, ecc. Il target è la zona di rilascio (o insieme di zone di rilascio) che accetta i dati che lutente sta tentando di eliminare. Tieni presente che non tutti gli elementi possono essere target, ad esempio unimmagine non può essere un target.

Inizio e fine una sequenza di trascinamento della selezione #

Dopo aver definito gli attributi draggable="true" sul contenuto, allegare un dragstart gestore di eventi per avviare la sequenza DnD per ogni colonna.

Questo codice imposterà lopacità della colonna al 40% quando lutente inizia a trascinarla, quindi la riporterà al 100% al termine dellevento di trascinamento.

Il risultato può essere visto nella demo Glitch di seguito. Trascina un elemento e diventa opaco. Poiché la destinazione dellevento dragstart è lelemento di origine, limpostazione di this.style.opacity su 40% offre allutente feedback visivo che lelemento è la selezione corrente da spostare. Una volta rilasciato lelemento, sebbene la funzionalità di rilascio non sia attiva, lelemento di origine torna al 100% di opacità.

Aggiungi ulteriori segnali visivi con dragenter, dragover e dragleave #

Per aiutare lutente a capire come interagire con la tua interfaccia, usa dragenter, dragover e dragleave gestori di eventi. In questo esempio le colonne sono destinazioni di rilascio oltre ad essere trascinabili. Aiuta lutente per capirlo, tratteggia il bordo mentre tiene un elemento trascinato su una colonna. Ad esempio, nel tuo CSS potresti creare una classe over per rappresentare gli elementi che sono obiettivi di rilascio:

Quindi, nella tua J avaScript ha configurato i gestori di eventi, aggiungi la classe over quando la colonna viene trascinata e rimuovila quando usciamo. Nel dragend gestore ci assicuriamo anche di rimuovere le classi alla fine del trascinamento.

Ci sono un paio di punti che vale la pena trattare in questo codice :

• Nel caso di trascinare qualcosa come un collegamento, è necessario impedire il comportamento predefinito del browser, che è quello di navigare verso quel collegamento. Per fare ciò, chiamare e.preventDefault() nellevento dragover. Unaltra buona pratica è restituire false nello stesso gestore.
• Il dragenter gestore di eventi viene utilizzato per attivare / disattivare la classe over anziché dragover Se utilizzi dragover, la classe CSS verrebbe attivata molte volte mentre levento dragover continuava a attivarsi al passaggio del mouse su una colonna. che causerebbe il il renderer del browser per eseguire una grande quantità di lavoro non necessario. Mantenere i ridisegni al minimo è sempre una buona idea.Se devi utilizzare levento dragover per qualcosa, considera la limitazione o il debouncing del listener di eventi.

Completamento del rilascio #

Per elaborare il rilascio effettivo, aggiungi un listener di eventi per levento drop. Nel gestore drop, dovrai impedire il comportamento predefinito del browser per i drop, che in genere è una sorta di fastidioso reindirizzamento. Puoi impedire che levento si diffonda nel DOM chiamando e.stopPropagation().

Se a questo punto esegui il codice, lelemento non verrà rilasciato nella nuova posizione. Per ottenere ciò devi utilizzare DataTransfer oggetto.

La proprietà dataTransfer è il luogo in cui avviene tutta la magia DnD. contiene i dati inviati in unazione di trascinamento. dataTransfer è impostato nellevento dragstart e letto / gestito nellevento drop. La chiamata a e.dataTransfer.setData(mimeType, dataPayload) ti consente di impostare loggetto “S Tipo MIME e payload dei dati.

In questo esempio, consentiremo agli utenti di riorganizzare lordine delle colonne. Per farlo, devi prima memorizzare lHTML dellelemento sorgente quando il trascinamento inizia:

Nellevento drop che elabori il rilascio della colonna, impostando lHTML della colonna di origine sullHTML della colonna di destinazione su cui è stato rilasciato, controllando innanzitutto che lutente non stia ricadendo sulla stessa colonna da cui è stato trascinato.

Puoi vedere il risultato nella seguente demo. Trascina e rilascia la colonna A sopra la colonna B e osserva come cambiano di posizione:

Altro proprietà di trascinamento #

Loggetto dataTransfer espone le proprietà per fornire un feedback visivo allutente durante il processo di trascinamento. Queste proprietà possono essere utilizzate anche per controllare il modo in cui ogni destinazione di rilascio risponde a un particolare tipo di dati.

• dataTransfer.effectAllowed restrizione ts quale “tipo di trascinamento” lutente può eseguire sullelemento. Viene utilizzato nel modello di elaborazione drag-and-drop per inizializzare il dropEffect durante il e dragover. La proprietà può essere impostata sui seguenti valori: none, copy, copyLink, copyMove, link, linkMove, move, all e uninitialized.
• dataTransfer.dropEffect controlla il feedback che viene fornito allutente durante il dragenter e dragover eventi. Quando lutente passa sopra un elemento di destinazione, il cursore del browser indicherà quale tipo di operazione avrà luogo (ad es. una copia, uno spostamento, ecc.). Leffetto può assumere uno dei seguenti valori: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) significa che invece di utilizzare il browser ” s feedback predefinito “immagine fantasma”, puoi facoltativamente impostare unicona di trascinamento.

Caricamento di file con trascinamento della selezione #

Questo semplice esempio utilizza una colonna sia come trascinare la sorgente e trascinare la destinazione.Questo potrebbe essere visualizzato in uninterfaccia utente in cui allutente viene chiesto di riorganizzare gli elementi.In alcune situazioni la destinazione e la sorgente del trascinamento potrebbero essere diverse, come uninterfaccia in cui lutente deve selezionare unimmagine come immagine principale di un prodotto trascinando limmagine selezionata su un target.

Il trascinamento viene spesso utilizzato per consentire agli utenti di trascinare elementi dal desktop in unapplicazione. La differenza principale è nel tuo drop gestore. Invece di utilizzare dataTransfer.getData() per accedere ai file, i loro dati verranno sarà contenuto nella proprietà dataTransfer.files:

Puoi trovare ulteriori informazioni al riguardo in Custom drag-and-drop.