dataTransfer Object
Transfer data between drag source and drop target.
dataTransfer Object is a free HTML Academy lesson on CoddyKit — lesson 3 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 HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What dataTransfer Holds
The dataTransfer object is attached to every drag event and is the only communication channel between the source and the target. It carries payload data, file lists, allowed effects, and the chosen drop effect.
setData and getData
The source writes typed payloads with e.dataTransfer.setData(format, value). The target reads them with e.dataTransfer.getData(format). Both arguments are strings; values are coerced to string before storage.
src.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", "hello");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));
});Multiple MIME Types
Storing the same payload under several types makes a drag interoperable: "text/plain" works in any text editor, "text/uri-list" is recognized by browsers as a URL, "text/html" preserves formatting in word processors. The target chooses what it understands.
Read Restrictions Outside drop
For privacy, the browser exposes only the list of types — not the values — to dragenter and dragover handlers via e.dataTransfer.types. The actual data is readable only inside the drop event of an accepting target.
The files List
When the user drags from the desktop, e.dataTransfer.files is a FileList of File objects. It is empty for drags that originate inside the page. Treat it as the canonical way to detect an external file drop and to access size, name, and type.
items Collection
e.dataTransfer.items exposes both strings and files as DataTransferItem objects. Each item has kind ("string" or "file"), type (MIME) and getAsString(cb) / getAsFile(). items is the modern, type-aware alternative to files + getData.
for (const item of e.dataTransfer.items) {
if (item.kind === "file") {
const file = item.getAsFile();
console.log(file.name);
} else {
item.getAsString((s) => console.log(item.type, s));
}
}effectAllowed vs dropEffect
effectAllowed is set by the source in dragstart and lists operations the source supports. dropEffect is set by the target in dragover and chooses one of those operations. The browser cancels the drop if the two disagree.
Custom Drag Image
e.dataTransfer.setDragImage(node, x, y) replaces the default ghost. Pass an off-screen DOM element styled to taste, plus the offset of the cursor relative to that element. The change applies only for the current drag.
clearData
e.dataTransfer.clearData() wipes all formats; clearData("text/plain") removes a single format. It is rarely needed because dataTransfer is created fresh per drag, but useful when you start populating data and then decide to cancel.
Cross-Origin Behavior
Files dragged from a page on origin A into a page on origin B are still delivered — the API works across origins. However, the receiving page sees only what the source explicitly placed in dataTransfer; arbitrary DOM access is not granted.
Drag from Browser to Desktop
By writing the "DownloadURL" type (setData("DownloadURL", "image/png:filename.png:https://...")) a page can let the user drag a file out of the browser to the desktop. Browser support is limited (Chromium-based browsers) so detect and fall back gracefully.
Knowledge Check
Why is dataTransfer.getData() not allowed to return the actual stored value during the dragover event?
Summary
dataTransfer is the bridge between drag source and drop target. Use setData/getData for typed string payloads, items for a unified files+strings view, files for desktop drops, setDragImage for custom previews, and effectAllowed/dropEffect to negotiate the operation.
Frequently asked questions
Is the “dataTransfer Object” lesson free?
Yes — the full text of “dataTransfer Object” is free to read here on the web, and the HTML 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 HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “dataTransfer Object”?
Transfer data between drag source and drop target. You practise HTML 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 HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “dataTransfer Object” 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 HTML Academy lesson?
Yes. Every HTML 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.