Drop Targets and dataTransfer
Accept drops and transfer data.
What Makes a Drop Target?
By default elements reject drops. To accept a drop you must prevent the default behavior on both dragover and drop. This is the single most common gotcha.
Allowing a Drop with dragover
The browser blocks dropping unless you call preventDefault() in the dragover handler. Without it, the drop event never fires.
const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
e.preventDefault(); // REQUIRED to allow drop
});All lessons in this course
- Making Elements Draggable
- Drop Targets and dataTransfer
- Visual Feedback During Drag
- Dragging Files into the Page