JavaScript Academy · Les

Visuele feedback tijdens het slepen

Stijl elementen tijdens sleepbewerkingen.

Les 3 van 413 stappen

Visuele feedback tijdens het slepen is een gratis JavaScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Waarom visuele feedback belangrijk is

Goede functionaliteit voor slepen en neerzetten laat de gebruiker zien wat er gebeurt: welk item wordt verplaatst, waar het kan worden neergezet en of neerzetten geldig is. Zonder feedback voelt de interactie defect aan.

Het versleepte item opmaken

Maak de bron op dragstart lichter of schaal deze, zodat de gebruiker ziet wat die heeft opgepakt.

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

De gebeurtenis dragenter

dragenter wordt geactiveerd wanneer het versleepte item een mogelijk doel binnengaat. Gebruik dit om de zone te markeren.

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

De gebeurtenis dragleave

dragleave wordt geactiveerd wanneer het item het doel verlaat. Verwijder hier de markering.

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

Het flikkerprobleem

dragenter/dragleave worden ook voor onderliggende elementen geactiveerd, waardoor de markering flikkert. Met een teller of een controle van relatedTarget blijft de markering stabiel.

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

Bij drop opnieuw instellen

Wis de markeringsstatus altijd in de handler voor drop, omdat dragleave mogelijk niet wordt geactiveerd wanneer neerzetten is gelukt.

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

De sleepafbeelding aanpassen

setDragImage(element, offsetX, offsetY) in dragstart vervangt de standaardafbeelding door elk gewenst element.

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

De cursor via dropEffect instellen

De cursor (plusteken voor kopiëren, pijl voor verplaatsen, symbool voor niet neerzetten) wordt bepaald door dropEffect, dat je instelt bij dragover. Wijs ongeldige drops af met "none".

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

Een tijdelijke drop-plaats tonen

Voeg in sorteerbare lijsten een tijdelijk element in op de berekende drop-positie, zodat gebruikers precies zien waar het item terechtkomt.

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

De invoegpositie berekenen

Vergelijk de Y-positie van de aanwijzer met het verticale midden van elk item om te bepalen of je het ervoor of erna neerzet.

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

Toegankelijke feedback

Alleen visuele aanwijzingen sluiten gebruikers van toetsenborden en schermlezers uit. Combineer slepen en neerzetten daarom met ARIA-live-aankondigingen en een alternatief met het toetsenbord voor toegankelijkheid.

Korte controle

Test visuele feedback.

Beantwoord dit in de interactieve les

Samenvatting: visuele feedback

Je hebt het versleepte item opgemaakt, zones gemarkeerd met dragenter/dragleave, het flikkeren opgelost met een diepteteller, de sleepafbeelding aangepast, de cursor aangestuurd via dropEffect en tijdelijke drop-plaatsen getoond. Hierna: bestanden naar binnen slepen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Visuele feedback tijdens het slepen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Visuele feedback tijdens het slepen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Visuele feedback tijdens het slepen”?

Stijl elementen tijdens sleepbewerkingen. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Visuele feedback tijdens het slepen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy