JavaScript Academy · Lesson

Drop Targets and dataTransfer

Accept drops and transfer data.

Lesson 2 of 413 steps

Drop Targets and dataTransfer is a free JavaScript Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

What Makes a Drop Target?

By default elements reject drops. To accept a drop you must prevent the default behavior on both dragover and drop. This is the single most common gotcha.

Allowing a Drop with dragover

The browser blocks dropping unless you call preventDefault() in the dragover handler. Without it, the drop event never fires.

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

The drop Event

When the user releases over a valid target, drop fires. Prevent default here too (it stops the browser opening dropped files/URLs) and read the data.

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

Reading dataTransfer

getData(format) retrieves what was stored in dragstart. The format string must match what was set.

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

Moving an Element

A classic use: append the dragged node into the drop zone using the id you transferred.

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

Multiple Data Formats

dataTransfer can hold several formats at once — e.g. text/plain and application/json — and the target reads whichever it understands.

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

Setting dropEffect

In dragover, set dropEffect to "copy", "move", or "link" to control the cursor and the operation semantics.

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

effectAllowed vs dropEffect

effectAllowed (set by the source) declares what is permitted; dropEffect (set by the target) chooses one of them. They work together to show the right cursor.

Reordering a List

Combine drop position with insertion to reorder items. Determine whether to insert before or after the element under the cursor.

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

Identifying the Drop Target

Use e.target (the element under the pointer) and closest() to find the relevant container when targets are nested.

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

Clearing Data

dataTransfer.clearData() empties stored data; passing a format clears just that one. The store is reset automatically after the drag anyway.

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

Quick Check

Test drop targets.

Answer it in the interactive lesson

Recap: Drop Targets and dataTransfer

You made drop zones by calling preventDefault() on dragover and drop, read payload with getData, moved and reordered elements, set dropEffect, and handled nested targets. Next: visual feedback.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Drop Targets and dataTransfer” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Drop Targets and dataTransfer”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

What will I learn in “Drop Targets and dataTransfer”?

Accept drops and transfer data. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “Drop Targets and dataTransfer” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy