On the draggable element you can listen for:

• dragstart
• drag
• dragend

On the drop target you can listen for:

• dragenter
• dragover
• dragleave
• drop

Overview of a drag and drop operation and the events fired

When the user starts dragging (by clicking and moving, or tapping and dragging), the dragstart event fires on the draggable element:

element.addEventListener('dragstart', event => {
  //...
})

The handler receives a DragEvent object, which extends the Event interface used by mouse, keyboard, and other events.

While the element is being dragged, the drag event fires repeatedly. Consider throttling the handler as you would for scroll or mouseover.

When the pointer enters a drop target:

1. dragenter fires on the drop target
2. dragover fires on the drop target (repeatedly while over it)

When the pointer leaves the drop target, dragleave fires on the drop target.

When the user releases the mouse button, drop fires on the drop target and dragend fires on the dragged element.

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