Feedback visivo durante il trascinamento
Applichi stili agli elementi durante le operazioni di trascinamento.
Feedback visivo durante il trascinamento è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Perché il feedback visivo è importante
Un buon sistema di trascinamento indica all'utente cosa sta accadendo: quale elemento si sta spostando, dove può essere rilasciato e se il rilascio è valido. Senza feedback, l'interazione sembra non funzionare.
Applicare stili all'elemento trascinato
Riduca l'opacità o le dimensioni della sorgente in dragstart, così l'utente vede che cosa ha selezionato.
item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));L'evento dragenter
dragenter viene generato quando l'elemento trascinato entra in una potenziale destinazione. Lo utilizzi per evidenziare l'area.
zone.addEventListener("dragenter", (e) => {
e.preventDefault();
zone.classList.add("drag-over");
});L'evento dragleave
dragleave viene generato quando l'elemento lascia la destinazione. Rimuova qui l'evidenziazione.
zone.addEventListener("dragleave", () => {
zone.classList.remove("drag-over");
});Il problema dello sfarfallio
dragenter/dragleave vengono generati anche per gli elementi figli, causando sfarfallio. Un contatore o un controllo su relatedTarget mantiene stabile l'evidenziazione.
let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });Reimpostare al rilascio
Cancelli sempre lo stato di evidenziazione nel gestore di drop, perché dragleave potrebbe non essere generato dopo un rilascio riuscito.
zone.addEventListener("drop", (e) => {
e.preventDefault();
depth = 0;
zone.classList.remove("drag-over");
});Personalizzare l'immagine di trascinamento
setDragImage(element, offsetX, offsetY) in dragstart sostituisce l'immagine fantasma predefinita con un elemento qualsiasi.
item.addEventListener("dragstart", (e) => {
const ghost = document.getElementById("custom-ghost");
e.dataTransfer.setDragImage(ghost, 20, 20);
});Il cursore tramite dropEffect
Il cursore (segno più per la copia, freccia per lo spostamento, simbolo di divieto) è determinato da dropEffect, impostato in dragover. Rifiuti i rilasci non validi con "none".
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});Mostrare un segnaposto di rilascio
Negli elenchi ordinabili, inserisca un elemento segnaposto nella posizione di rilascio prevista, così l'utente vede esattamente dove verrà collocato l'elemento.
function showPlaceholder(beforeEl) {
list.insertBefore(placeholder, beforeEl);
}Calcolare la posizione di inserimento
Confronti la coordinata Y del puntatore con il punto medio verticale di ogni elemento per decidere se rilasciare l'elemento prima o dopo di esso.
function getAfterElement(container, y) {
const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
return items.find((el) => {
const box = el.getBoundingClientRect();
return y < box.top + box.height / 2;
});
}Feedback accessibile
I soli segnali visivi escludono gli utenti della tastiera e degli screen reader. Affianchi al trascinamento annunci ARIA live e un'alternativa da tastiera per garantire l'accessibilità.
Controllo rapido
Verifichi il feedback visivo.
Riepilogo: feedback visivo
Ha applicato stili all'elemento trascinato, evidenziato le aree con dragenter/dragleave, risolto lo sfarfallio con un contatore della profondità, personalizzato l'immagine di trascinamento, controllato il cursore tramite dropEffect e mostrato segnaposto di rilascio. Prossimo argomento: trascinare file nell'applicazione.
Domande Frequenti
La lezione «Feedback visivo durante il trascinamento» è gratuita?
Sì — il testo completo di «Feedback visivo durante il trascinamento» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Feedback visivo durante il trascinamento»?
Applichi stili agli elementi durante le operazioni di trascinamento. Eserciti JavaScript 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 JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript 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 3 di 4.
Quanto tempo richiede la lezione «Feedback visivo durante il trascinamento»?
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 JavaScript Academy?
Sì. Ogni lezione JavaScript 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
- Rendere trascinabili gli elementi
- Aree di rilascio e dataTransfer
- Feedback visivo durante il trascinamento
- Trascinare file nella pagina