JavaScript Academy · Lektion

Visuell återkoppling under dragning

Formge element under dragoperationer.

Lektion 3 av 413 steg

Visuell återkoppling under dragning är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Varför visuell återkoppling är viktig

En bra dra-och-släpp-interaktion visar användaren vad som händer: vilket objekt som flyttas, var det kan placeras och om ett släpp är giltigt. Utan återkoppling känns interaktionen trasig.

Formatera det dragna objektet

Gör källan genomskinligare eller skala ned den i dragstart så att användaren ser vad som valdes.

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

Händelsen dragenter

dragenter utlöses när det dragna objektet kommer in över ett möjligt mål. Använd den för att markera zonen.

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

Händelsen dragleave

dragleave utlöses när objektet lämnar målet. Ta bort markeringen här.

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

Problemet med flimmer

dragenter/dragleave utlöses även för underordnade element, vilket orsakar flimmer. En räknare eller en kontroll av relatedTarget håller markeringen 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"); });

Återställa vid släpp

Rensa alltid markeringstillståndet i drop-hanteraren, eftersom dragleave kanske inte utlöses när ett släpp lyckas.

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

Anpassa dragbilden

setDragImage(element, offsetX, offsetY) i dragstart ersätter den förvalda spökbilden med valfritt element.

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

Markören via dropEffect

Markören (plustecken för kopiering, pil för flytt och symbolen för inget släpp) styrs av dropEffect, som anges i dragover. Avvisa ogiltiga släpp med "none".

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

Visa en platshållare för släpp

I sorterbara listor infogar du ett platshållarelement på den beräknade släppositionen, så att användaren exakt ser var objektet kommer att placeras.

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

Beräkna infogningspositionen

Jämför pekarens Y-koordinat med den vertikala mittpunkten för varje objekt för att avgöra om det ska släppas före eller efter objektet.

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

Tillgänglig återkoppling

Enbart visuella signaler utestänger tangentbords- och skärmläsaranvändare. Kombinera dra-och-släpp med ARIA-live-meddelanden och ett tangentbordsalternativ för bättre tillgänglighet.

Snabbkontroll

Testa visuell återkoppling.

Besvara frågan i den interaktiva lektionen

Repetition: Visuell återkoppling

Du formaterade det dragna objektet, markerade zoner med dragenter/dragleave, löste flimret med en djup-räknare, anpassade dragbilden, styrde markören via dropEffect och visade platshållare för släpp. Nästa steg: dra in filer.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Visuell återkoppling under dragning” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Visuell återkoppling under dragning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Visuell återkoppling under dragning”?

Formge element under dragoperationer. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Visuell återkoppling under dragning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy