JavaScript Academy · Lektion

Släppmål och dataTransfer

Acceptera släpp och överför data.

Lektion 2 av 413 steg

Släppmål och dataTransfer är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 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.

Vad gör ett element till ett släppmål?

Som standard avvisar element släpp. För att acceptera ett släpp måste ni förhindra standardbeteendet både vid dragover och drop. Detta är den allra vanligaste fallgropen.

Tillåta släpp med dragover

Webbläsaren blockerar släppet om du inte anropar preventDefault() i hanteraren för dragover. Utan det anropet utlöses drop-eventet aldrig.

const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
  e.preventDefault(); // REQUIRED to allow drop
});

Händelsen drop

När användaren släpper över ett giltigt mål utlöses drop. Förhindra standardbeteendet även här (det hindrar webbläsaren från att öppna släppta filer/URL:er) och läs datan.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  console.log("Dropped", id);
});

Läsa dataTransfer

getData(format) hämtar det som lagrades i dragstart. Formatsträngen måste matcha det som angavs.

const payload = e.dataTransfer.getData("text/plain");

Flytta ett element

Ett klassiskt användningsområde är att lägga till den dragna noden i släppzonen med det id som överfördes.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  zone.appendChild(dragged);
});

Flera dataformat

dataTransfer kan innehålla flera format samtidigt — till exempel text/plain och application/json — och målet läser det format som det kan tolka.

e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));

Ange dropEffect

I dragover anger du dropEffect till "copy", "move" eller "link" för att styra markören och operationens innebörd.

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

effectAllowed jämfört med dropEffect

effectAllowed (som anges av källan) deklarerar vad som är tillåtet, medan dropEffect (som anges av målet) väljer ett av dessa alternativ. Tillsammans visar de rätt markör.

Ordna om en lista

Kombinera släppositionen med infogning för att ordna om objekt. Avgör om objektet ska infogas före eller efter elementet under markören.

list.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  list.insertBefore(dragged, e.target);
});

Identifiera släppmålet

Använd e.target (elementet under pekaren) och closest() för att hitta rätt behållare när målen är nästlade.

zone.addEventListener("drop", (e) => {
  const slot = e.target.closest(".slot");
  if (slot) slot.appendChild(getDragged(e));
});

Rensa data

dataTransfer.clearData() tömmer lagrad data. Om du anger ett format rensas bara det formatet. Datalagret återställs ändå automatiskt efter dragningen.

e.dataTransfer.clearData("text/plain");

Snabbkontroll

Testa släppmål.

Besvara frågan i den interaktiva lektionen

Repetition: Släppmål och dataTransfer

Du skapade släppzoner genom att anropa preventDefault() på dragover och drop, läste nyttolasten med getData, flyttade och ordnade om element, angav dropEffect och hanterade nästlade mål. Nästa steg: visuell återkoppling.

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 ”Släppmål och dataTransfer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Släppmål och dataTransfer”, 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 ”Släppmål och dataTransfer”?

Acceptera släpp och överför data. 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 2 av 4.

Hur lång tid tar lektionen ”Släppmål och dataTransfer”?

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