Göra element dragbara
Aktivera dragning och hantera drag-händelser.
Göra element dragbara är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 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.
HTML Drag and Drop API
Det inbyggda Drag and Drop API låter användare ta tag i element och släppa dem någon annanstans. Det är händelsestyrt: källelement utlöser drag-händelser och släppmål utlöser sina egna. Inget bibliotek krävs.
Attributet draggable
Som standard kan endast länkar och bilder dras. Lägg till draggable="true" för att göra vilket element som helst dragbart.
<div draggable="true" id="card">Drag me</div>Ställa in draggable i JS
Ni kan växla beteendet från ett skript via egenskapen draggable.
const card = document.getElementById("card");
card.draggable = true;Händelsen dragstart
dragstart utlöses i det ögonblick en dragning börjar. Här registrerar ni vad som dras.
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});Bära data med dataTransfer
Händelsen exponerar dataTransfer. Använd setData(format, value) i dragstart för att bifoga en nyttolast som följer med dragningen.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});Händelsen drag
drag utlöses kontinuerligt medan elementet flyttas. Använd den sparsamt – den kan utlösas många gånger per sekund.
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});Händelsen dragend
dragend utlöses när användaren släpper elementet, oavsett om släppningen lyckades. Använd den för att återställa eventuell styling av källan.
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});Markera källelementet
Ett vanligt mönster är att lägga till en klass vid dragstart och ta bort den vid dragend för att tona ned eller framhäva det dragna objektet.
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));Tillåtna effekter
Ange effectAllowed i dragstart för att deklarera vilka åtgärder som är giltiga: "copy", "move", "link" eller kombinationer av dem.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});Begränsning på pekskärmsenheter
Det inbyggda API:et har begränsat stöd för pekinmatning på mobila enheter. För appar som främst använder pekinmatning kan ni överväga Pointer Events eller ett särskilt bibliotek; det inbyggda API:et fungerar bäst på datorer.
Inaktivera textmarkering
Dragning kan oavsiktligt markera text. En liten CSS-regel håller dragningarna rena.
/* CSS */
.draggable { user-select: none; }Snabbtest
Testa grunderna i draggable.
Sammanfattning: Göra element dragbara
Ni har aktiverat dragning med draggable="true", hanterat dragstart/drag/dragend, bifogat en nyttolast via dataTransfer.setData, angett effectAllowed och formaterat källan. Nästa steg: släppmål.
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
Vanliga frågor
Är lektionen ”Göra element dragbara” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Göra element dragbara”, 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 ”Göra element dragbara”?
Aktivera dragning och hantera drag-händelser. 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 1 av 4.
Hur lång tid tar lektionen ”Göra element dragbara”?
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
- Göra element dragbara
- Släppmål och dataTransfer
- Visuell återkoppling under dragning
- Dra filer till sidan