JavaScript Academy · Lesson

Drop Targets and dataTransfer

Accept drops and transfer data.

Drop Targets and dataTransfer is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

Is the “Drop Targets and dataTransfer” lesson free?

Yes — the full text of “Drop Targets and dataTransfer” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

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