Drag and Drop: Drop targets

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

Drop targets are elements that can receive a dropped item.

Just as not every element is draggable, not every element can receive a drop. The element must be a valid drop target.

To make an element a drop target, listen for its dragover event and call preventDefault() on the event:

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

With both a draggable element and a drop target, you can handle drag and drop events.