Elementen versleepbaar maken
Schakel slepen in en handel drag-events af.
Elementen versleepbaar maken is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 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.
De HTML Drag and Drop API
Met de ingebouwde Drag and Drop API kunnen gebruikers elementen vastpakken en ergens anders neerzetten. De API is gebeurtenisgestuurd: bronelementen activeren sleepgebeurtenissen en neerzetdoelen activeren hun eigen gebeurtenissen. Je hebt geen bibliotheek nodig.
Het draggable-attribuut
Standaard kunnen alleen links en afbeeldingen worden versleept. Voeg draggable="true" toe om elk element versleepbaar te maken.
<div draggable="true" id="card">Drag me</div>draggable instellen in JS
Je kunt dit gedrag vanuit een script omschakelen via de eigenschap draggable.
const card = document.getElementById("card");
card.draggable = true;De gebeurtenis dragstart
dragstart wordt geactiveerd zodra het slepen begint. Hier leg je vast wat er wordt versleept.
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});Gegevens meenemen met dataTransfer
De gebeurtenis stelt dataTransfer beschikbaar. Gebruik setData(format, value) in dragstart om gegevens toe te voegen die met het slepen meegaan.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});De gebeurtenis drag
drag wordt voortdurend geactiveerd terwijl het element beweegt. Gebruik dit spaarzaam — de gebeurtenis kan meerdere keren per seconde optreden.
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});De gebeurtenis dragend
dragend wordt geactiveerd wanneer de gebruiker loslaat, ongeacht of het neerzetten is gelukt. Gebruik dit om de opmaak van de bron terug te zetten.
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});Het bronelement markeren
Een veelgebruikt patroon is om bij dragstart een klasse toe te voegen en die bij dragend te verwijderen, zodat het versleepte item vervaagt of wordt gemarkeerd.
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));Toegestane effecten
Stel effectAllowed in dragstart in om aan te geven welke bewerkingen geldig zijn: "copy", "move", "link" of combinaties daarvan.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});Aandachtspunt voor aanraakapparaten
De ingebouwde API biedt op mobiele apparaten beperkte ondersteuning voor aanraken. Overweeg voor apps die op aanraken zijn gericht Pointer Events of een speciale bibliotheek; de ingebouwde API komt het best tot zijn recht op desktop.
Tekstselectie uitschakelen
Door slepen kan er per ongeluk tekst worden geselecteerd. Met een kleine CSS-regel blijven sleepacties netjes.
/* CSS */
.draggable { user-select: none; }Korte controle
Controleer de basisprincipes van draggable.
Samenvatting: elementen versleepbaar maken
Je hebt slepen ingeschakeld met draggable="true", dragstart/drag/dragend afgehandeld, gegevens toegevoegd via dataTransfer.setData, effectAllowed ingesteld en de bron opgemaakt. Hierna: neerzetdoelen.
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
Veelgestelde vragen
Is de les “Elementen versleepbaar maken” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Elementen versleepbaar maken”, 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 “Elementen versleepbaar maken”?
Schakel slepen in en handel drag-events af. 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 1 van 4.
Hoe lang duurt de les “Elementen versleepbaar maken”?
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
- Elementen versleepbaar maken
- Drop-doelen en dataTransfer
- Visuele feedback tijdens het slepen
- Bestanden naar de pagina slepen