0Pricing
HTML Academy · Lesson

dataTransfer Object

Transfer data between drag source and drop target.

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 }));
});

All lessons in this course

  1. draggable Attribute and dragstart Event
  2. dragover and drop Events
  3. dataTransfer Object
  4. Practical Drag-to-Reorder List
← Back to HTML Academy