De events dragover en drop
Definieer geldige neerzetdoelen en handel het drop-event af
De events dragover en drop is een gratis HTML Academy-les op CoddyKit. Dit is les 2 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 HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Dropdoelen hebben twee afhandelaars
Een dropdoel moet zowel dragover (om neerzetten toe te staan) als drop (om de gegevens te ontvangen) afhandelen. Zonder dragover weigert de browser het activeren van drop, omdat het standaardgedrag is dat "geen element een dropdoel is".
preventDefault is verplicht
In de dragover-afhandelaar moet je e.preventDefault() aanroepen. Daarmee annuleer je de standaardactie van de browser die het neerzetten weigert. Zonder deze aanroep blijft de cursor op "niet toegestaan" staan en wordt de drop-gebeurtenis nooit geactiveerd, wat de gebruiker ook doet.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData("text/plain"));
});dragenter en dragleave
dragenter wordt eenmaal geactiveerd wanneer de cursor het doelgebied binnenkomt; dragleave wordt eenmaal geactiveerd wanneer de cursor het verlaat. Gebruik ze om een visuele markering voor slepen-boven in en uit te schakelen: voeg bij binnenkomst een klasse toe en verwijder die bij vertrek, zodat de gebruiker ziet welk gebied het neerzetten ontvangt.
dragleave wordt geactiveerd voor onderliggende elementen
Een subtiele eigenaardigheid: wanneer je de cursor over een onderliggend element beweegt, wordt dragleave op het bovenliggende element geactiveerd, gevolgd door dragenter op het onderliggende element. Gebruik een teller die je in dragenter verhoogt en in dragleave verlaagt. Verwijder de markering pas wanneer de teller weer nul is.
let counter = 0;
zone.addEventListener("dragenter", () => {
counter++;
zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
counter--;
if (counter === 0) zone.classList.remove("over");
});dropEffect instellen
Stel in dragover e.dataTransfer.dropEffect = "move" (of "copy", "link", "none") in om de cursor te besturen en de bron te laten weten wat er zal gebeuren. De bewerking moet compatibel zijn met effectAllowed van de bron, anders wordt het neerzetten geweigerd.
Gegevens lezen bij drop
Roep in de drop-afhandelaar e.dataTransfer.getData(format) aan met hetzelfde MIME-type als bij setData (meestal "text/plain"). Zoek vervolgens het element op id, voeg het toe aan het doel, werk een gegevensmodel bij of doe wat de toepassing nodig heeft.
Standaardactie bij drop voorkomen
Je hebt ook e.preventDefault() nodig in de drop-afhandelaar. Zonder deze aanroep valt de browser terug op zijn ingebouwde gedrag — voor een neergezette URL betekent dat navigeren naar de koppeling, waardoor de paginastatus onmiddellijk verloren gaat.
Neerzetten vanaf de desktop
De browser zet bestanden die vanuit het besturingssysteem worden gesleept om in een drop-gebeurtenis waarin e.dataTransfer.files is gevuld. Doorloop de FileList en lees elk bestand met de File API om uploads van afbeeldingen, logbestandslezers of functies voor documentimport te ondersteunen.
zone.addEventListener("drop", (e) => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
console.log(file.name, file.size);
}
});Meerdere typen in dataTransfer
setData kan dezelfde gegevens onder verschillende MIME-typen opslaan: "text/plain" als terugvaloptie, "text/uri-list" voor URL's en "application/json" voor gestructureerde gegevens. Het dropdoel kiest via getData het rijkste type dat het begrijpt.
Coördineren met aanraakevenementen
Mobiele browsers genereren geen dragover/drop vanuit aanraking. Gebruik voor een uniforme ervaring Pointer Events plus handmatige bepaling van het geraakte element, of een bibliotheek die de verschillen afschermt. Ingebouwd HTML5-slepen en neerzetten kun je het beste als uitsluitend voor desktop beschouwen.
Prestatietip
dragover wordt voortdurend geactiveerd terwijl de cursor beweegt — vaak tientallen keren per seconde. Houd de afhandelaar eenvoudig: vermijd dure DOM-opvragingen of layoutmetingen erin. Sla rechthoeken op in dragenter en gebruik ze opnieuw zolang de cursor boven het doel blijft.
Kennischeck
Waarom wordt de drop-gebeurtenis pas op een doel geactiveerd nadat je e.preventDefault() in de dragover-afhandelaar hebt aangeroepen?
Samenvatting
Een werkend dropdoel luistert naar dragover (altijd preventDefault aanroepen en eventueel dropEffect instellen) en drop (opnieuw preventDefault aanroepen en daarna dataTransfer.getData of dataTransfer.files lezen). Gebruik dragenter en dragleave met een teller voor de markering en houd afhandelaars eenvoudig, omdat dragover zeer vaak wordt geactiveerd.
Leer HTML 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
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “De events dragover en drop” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “De events dragover en drop”, 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 HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “De events dragover en drop”?
Definieer geldige neerzetdoelen en handel het drop-event af Je oefent met HTML 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 HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML 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 2 van 4.
Hoe lang duurt de les “De events dragover en drop”?
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 HTML Academy?
Ja. Elke les over HTML 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
- Het draggable-attribuut en dragstart-event
- De events dragover en drop
- Het dataTransfer-object
- Praktische lijst voor slepen en herschikken