AI Workshop: learn to build apps with AI →
Drag and Drop: Dragging data

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


As mentioned earlier, every drag-and-drop event is a DragEvent. It has a dataTransfer property that holds the data being dragged and exposes these properties:

  • dropEffect
  • effectAllowed
  • files
  • items (read only)
  • types (read only)

When the drag starts, you can read and write data through dataTransfer.

Lessons in this unit:

0: Introduction
1: Drop targets
2: Drag events
3: ▶︎ Dragging data
4: Set / get the effect
5: The data being transferred