Eventi dragover e drop
Definire destinazioni di rilascio valide e gestire l’evento drop
Eventi dragover e drop è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Le destinazioni di rilascio richiedono due gestori
Una destinazione di rilascio deve gestire sia dragover (per consentire il rilascio) sia drop (per riceverlo). Senza dragover, il browser rifiuta di generare drop perché il comportamento predefinito è "nessun elemento è una destinazione di rilascio".
preventDefault è obbligatorio
Nel gestore dragover deve chiamare e.preventDefault(). In questo modo annulla il comportamento predefinito del browser che rifiuta il rilascio. Senza questa chiamata, il cursore resta "not allowed" e l'evento drop non viene mai generato, qualunque cosa faccia l'utente.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData("text/plain"));
});dragenter e dragleave
dragenter si attiva una volta quando il cursore entra nella destinazione; dragleave si attiva una volta quando ne esce. Li utilizzi per attivare o disattivare un'evidenziazione visiva "drag-over": aggiunga una classe all'ingresso e la rimuova all'uscita, così l'utente vede quale area riceverà il rilascio.
dragleave si attiva per gli elementi figli
Un dettaglio poco intuitivo: spostando il cursore su un elemento figlio, viene generato dragleave sull'elemento padre, seguito da dragenter sul figlio. Utilizzi un contatore incrementato in dragenter e decrementato in dragleave, rimuovendo l'evidenziazione solo quando il contatore torna a zero.
let counter = 0;
zone.addEventListener("dragenter", () => {
counter++;
zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
counter--;
if (counter === 0) zone.classList.remove("over");
});Impostazione di dropEffect
All'interno di dragover, imposti e.dataTransfer.dropEffect = "move" (oppure "copy", "link", "none") per controllare il cursore e comunicare alla sorgente cosa accadrà. L'effetto deve essere compatibile con effectAllowed della sorgente, altrimenti il rilascio viene rifiutato.
Lettura dei dati nell'evento drop
Nel gestore drop chiami e.dataTransfer.getData(format) utilizzando lo stesso tipo MIME impiegato da setData (comunemente "text/plain"). Individui quindi l'elemento tramite id, lo aggiunga alla destinazione, aggiorni il modello dei dati o esegua qualsiasi altra operazione necessaria all'applicazione.
Prevenzione del comportamento predefinito in drop
Deve chiamare e.preventDefault() anche nel gestore drop. In caso contrario, il browser ricorre al proprio comportamento nativo: per un URL rilasciato significa navigare al link, cancellando immediatamente lo stato della pagina.
Rilascio dal desktop
Il browser converte i file trascinati dal sistema operativo in un evento drop con e.dataTransfer.files valorizzato. Iteri su FileList e legga ogni file tramite la File API per supportare il caricamento di immagini, i visualizzatori di file di log o l'importazione di documenti.
zone.addEventListener("drop", (e) => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
console.log(file.name, file.size);
}
});Più tipi in dataTransfer
setData può memorizzare lo stesso contenuto in diversi tipi MIME: "text/plain" come fallback, "text/uri-list" per gli URL e "application/json" per i contenuti strutturati. La destinazione sceglie il tipo più ricco che è in grado di comprendere tramite getData.
Coordinamento con gli eventi touch
I browser mobili non generano automaticamente dragover e drop a partire dagli eventi touch. Per un'esperienza uniforme, utilizzi Pointer Events insieme al rilevamento manuale delle collisioni oppure una libreria che astragga le differenze. Il DnD nativo di HTML5 va considerato soprattutto una soluzione per desktop.
Suggerimento sulle prestazioni
dragover si attiva continuamente mentre il cursore si sposta, spesso decine di volte al secondo. Mantenga leggero il gestore: eviti query DOM costose o letture del layout al suo interno. Memorizzi i rettangoli in dragenter e li riutilizzi finché il cursore resta sulla destinazione.
Verifica delle conoscenze
Perché l'evento drop non viene mai generato su una destinazione finché non chiama e.preventDefault() nel gestore dragover?
Riepilogo
Una destinazione di rilascio funzionante ascolta dragover (con preventDefault sempre obbligatorio e dropEffect facoltativo) e drop (di nuovo preventDefault, quindi lettura di dataTransfer.getData o dataTransfer.files). Utilizzi dragenter e dragleave con un contatore per l'evidenziazione e mantenga leggeri i gestori, perché dragover si attiva molto spesso.
Domande Frequenti
La lezione «Eventi dragover e drop» è gratuita?
Sì — il testo completo di «Eventi dragover e drop» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Eventi dragover e drop»?
Definire destinazioni di rilascio valide e gestire l’evento drop Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Eventi dragover e drop»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Attributo draggable ed evento dragstart
- Eventi dragover e drop
- Oggetto dataTransfer
- Creare una lista riordinabile con il trascinamento