Drag and drop feels natural to users, but browsers do not grant it automatically. In HTML5, an element becomes a drag source only when you mark it with the draggable attribute and then attach JavaScript that responds when the drag begins. This topic focuses on that first half of the interaction: preparing the source element, recognizing which element the user grabbed, wiring up a dragstart listener, and placing information into the dataTransfer object so a drop target can later retrieve it.
This matters in COP4813 because every later piece of the module depends on a correctly configured source. If the draggable attribute is missing, if dragstart never fires, or if nothing is stored in dataTransfer, the dragover and drop handlers you write afterward will have nothing meaningful to work with. Getting the source right also sets up the visual feedback users rely on — the class changes, opacity shifts, and drag images that signal "this item is moving."
As you watch the videos below, pay close attention to three things: where the draggable attribute is declared (markup versus JavaScript), how the developer identifies the element being dragged inside the event handler (event.target, a stored reference, or an id), and what exactly gets passed to dataTransfer.setData. Also notice what the videos do not cover — keyboard access and ARIA announcements for assistive technology — since native drag and drop is mouse-oriented by default and accessibility must be added deliberately by you.
A general walkthrough of drag and drop in JavaScript that covers both dragging HTML elements and dragging files into a page. Based on its title and description, it should demonstrate marking elements as draggable, handling the drag events, and it also mentions using a plugin as an alternative approach. The file-drop portion gives useful context for how the same event model serves more than one use case.
At just over nine minutes it gives a broad but concrete orientation to the API, which helps you see where the draggable attribute and dragstart fit within the whole interaction lifecycle before narrowing in on details.
A short, focused demonstration of moving items between containers using the native HTML Drag and Drop API. Expect to see draggable elements defined in markup, event listeners attached to the source items, and container elements set up to receive them. The container-to-container framing shows why identifying the drag source element clearly is necessary.
Its brevity and its use of the native API rather than a library keep the focus on the standard attributes and events this topic covers, making it a clean reinforcement of drag source setup.
A step-by-step build of a draggable element using HTML, CSS, and JavaScript, with source code referenced in the description. It should walk through the markup, the styling that provides visual feedback while an item is in motion, and the JavaScript event handling that drives the behavior. The longer runtime allows for a slower, more explanatory pace.
The combined HTML, CSS, and JavaScript treatment directly supports the visual feedback subtopic, showing how styling and event handlers work together rather than treating the attribute in isolation.
Together these videos build the foundation for MO1 and MO2 by showing the draggable attribute, the dragstart event, and dataTransfer in working code you can replicate. The container-based example previews the source-to-target relationship that MO3 asks you to reason about, and the styled draggable build contributes the visual-feedback techniques you will need for the polished component in MO4. None of the three addresses keyboard operation or ARIA attributes, so treat that gap as your prompt for MO5: as you watch, note where a keyboard-only user would be blocked and what you would add to make these examples usable with assistive technology.
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.