The drop event is where a drag-and-drop interaction finally pays off. It fires on the drop target when the user releases the mouse button over an element that has been designated a valid target, and it is your opportunity to read the data that was stashed during dragstart and act on it. Because browsers have default behaviors for dropped content (such as opening a dragged link or file), your drop handler almost always begins with event.preventDefault() before doing anything else.
In this topic you will work through the full sequence: attaching a drop listener to the target, suppressing default browser behavior, calling event.dataTransfer.getData() with the same format string you used in setData(), using the retrieved value (typically an element id) to locate the dragged element with document.getElementById(), and then updating the DOM — usually with appendChild() or insertBefore() — so the element visually moves into its new container. Finally, you clean up any visual feedback, such as highlight classes or opacity changes added during dragover and dragstart, so the interface returns to a neutral state.
The heart of all of this is DOM manipulation: showing, hiding, moving, and restyling elements with JavaScript. The video below focuses on that underlying skill. As you watch, pay attention to how elements are selected, how classes and styles are toggled, and how those same techniques would let you update a drop target and remove leftover highlighting after a successful drop.
A short, project-oriented JavaScript tutorial that demonstrates how to show and hide a DOM element from code. Based on its title and description, it likely covers selecting an element, attaching an event handler, and toggling its visibility by changing a style property or a CSS class. The example is small enough to follow line by line and then adapt to your own pages.
The DOM-update techniques shown here — selecting elements and changing their appearance in response to an event — are exactly what a drop handler does when it moves an item into a target and clears highlight styling afterward, so it supports the "Updating the DOM After a Successful Drop" and "Cleaning Up Visual Feedback" subtopics.
The video reinforces the DOM-manipulation foundation that the drop event depends on: once getData() returns the identifier of the dragged element, everything that follows is ordinary JavaScript element selection and styling. That practice supports MO2 and MO3, where your drop listener must call preventDefault(), retrieve transferred data, and visibly complete the interaction, and it feeds directly into MO4, where the same show, hide, move, and restyle operations are combined to build a sortable list or Kanban-style board. Use the module readings and API reference alongside it for the drag-and-drop event names, attributes, and DataTransfer methods in MO1, and for the usability and accessibility review called for in MO5.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.