Where can we drag elements to is another point we need to clarify.

As well as we can’t just drag any element, we can’t also just drop into any element. The element must be valid drop target.

To make an element a drop target you listen for its dragover event and you either return false from it, or you call preventDefault() on the event passed:

const element = document.querySelector('#my-drop-target)
element.addEventListener('dragover', event => {
  event.preventDefault()
})

Once we do so, we have a draggable element and a drop target, and we can start looking into events.

Lessons in this unit: