JavaScript Academy · leksjon

Visuell tilbakemelding under draing

Style elementer under draoperasjoner.

Leksjon 3 av 413 trinn

Visuell tilbakemelding under draing er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hvorfor visuell tilbakemelding er viktig

God dra-og-slipp-funksjonalitet viser brukeren hva som skjer: hvilket element som flyttes, hvor det kan slippes, og om slippet er gyldig. Uten tilbakemelding føles samhandlingen ødelagt.

Formatere det trukne elementet

Gjør kilden svakere eller skaler den i dragstart, slik at brukeren ser hva som ble valgt.

item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));

dragenter-hendelsen

dragenter utløses når det trukne elementet kommer inn i et mulig mål. Bruk den til å fremheve sonen.

zone.addEventListener("dragenter", (e) => {
  e.preventDefault();
  zone.classList.add("drag-over");
});

dragleave-hendelsen

dragleave utløses når elementet forlater målet. Fjern fremhevingen her.

zone.addEventListener("dragleave", () => {
  zone.classList.remove("drag-over");
});

Flimreproblemet

dragenter/dragleave utløses også for underordnede elementer, noe som forårsaker flimring. En teller eller en kontroll av relatedTarget holder fremhevingen stabil.

let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });

Tilbakestille ved slipp

Fjern alltid tilstanden for fremheving i drop-håndtereren, siden dragleave kanskje ikke utløses ved et vellykket slipp.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  depth = 0;
  zone.classList.remove("drag-over");
});

Tilpasse dra-bildet

setDragImage(element, offsetX, offsetY) i dragstart erstatter standardbildet med et valgfritt element.

item.addEventListener("dragstart", (e) => {
  const ghost = document.getElementById("custom-ghost");
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

Markøren via dropEffect

Markøren (plusstegnet for kopiering, pilen for flytting eller symbolet for ugyldig slipp) styres av dropEffect, som angis i dragover. Avvis ugyldige slipp med "none".

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});

Vise en plassholder for slipp

I sorterbare lister setter du inn et plassholderelement på den beregnede slipposisjonen, slik at brukeren ser nøyaktig hvor elementet vil havne.

function showPlaceholder(beforeEl) {
  list.insertBefore(placeholder, beforeEl);
}

Beregne innsettingsposisjonen

Sammenlign pekerens Y-posisjon med det vertikale midtpunktet til hvert element for å avgjøre om det skal slippes før eller etter elementet.

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;
  });
}

Tilgjengelig tilbakemelding

Visuelle signaler alene ekskluderer tastatur- og skjermleserbrukere. Kombiner dra-og-slipp med ARIA live-kunngjøringer og et tastaturalternativ for bedre tilgjengelighet.

Kort kontroll

Test visuell tilbakemelding.

Besvar den i den interaktive leksjonen

Oppsummering: Visuell tilbakemelding

Det trukne elementet ble formatert, soner ble fremhevet med dragenter/dragleave, flimringen ble løst med en dybdeteller, dra-bildet ble tilpasset, markøren ble styrt via dropEffect, og plassholdere for slipp ble vist. Neste tema er å dra inn filer.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Visuell tilbakemelding under draing» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Visuell tilbakemelding under draing», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Visuell tilbakemelding under draing»?

Style elementer under draoperasjoner. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Visuell tilbakemelding under draing»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy