Every drag-and-drop interaction begins with a single moment: the user presses the mouse on a draggable element and starts to move it. That moment fires the dragstart event on the source element, and it is your one reliable opportunity to say what is being dragged, what data travels with it, and how the browser should visually represent the operation. If dragstart is not handled correctly, everything that follows — dragover, drop, and your DOM updates — has nothing meaningful to work with.
In this topic you will attach a dragstart listener (either in JavaScript with addEventListener or through the HTML draggable attribute plus an inline handler), then work with the event's dataTransfer property. The DataTransfer object is the small clipboard that rides along with the drag: you call setData() with a format string such as "text/plain" and a payload (often an element's id), set effectAllowed to describe whether the operation is a copy, move, or link, and optionally call setDragImage() to replace the default ghost image the browser generates.
As you watch the videos, pay attention to three things: where the listener is attached (the draggable source, not the drop target), exactly what value is passed to setData() and how that same value is later read back during the drop, and how the presenter makes the drag visually obvious — for example by adding a CSS class on dragstart and removing it later. Noticing those patterns now will make the dragover and drop topics much easier.
A short, focused lesson from a semester-length JavaScript course that isolates the dragstart event and shows how to detect when a drag operation begins. Given its placement in a drag-and-drop module, it most likely walks through marking an element as draggable, wiring up a dragstart handler, and confirming the event fires before moving on to the rest of the API.
It is the tightest match to this topic: a single five-minute segment devoted to dragstart alone, produced by a computer science instructor for a beginner course, so the pacing and vocabulary fit a classroom setting.
A practical walkthrough of drag-and-drop in JavaScript that covers both dragging HTML elements and dropping files from the desktop into a page. The length suggests it moves from marking elements draggable and handling the drag events through to reading the transferred data, and it also mentions using a plugin for added functionality.
It places dragstart in the context of a complete, working feature, which helps you see why storing data on the DataTransfer object at drag time matters for the drop handler later.
Reviewed a second time, this video is useful for focusing narrowly on the opening segment where the dragstart listener is attached and data is stored before the rest of the lifecycle is introduced.
Rewatching just the dragstart portion reinforces the attach-listener-then-setData pattern that you will reuse in every drag-and-drop exercise.
Together these videos build the foundation for MO1 and MO2: they name the draggable attribute, the dragstart event, and the dataTransfer methods you must recognize, and they demonstrate attaching the listener in JavaScript so you can reproduce it in your own code. The tutorials that show dragstart beside dragover and drop support MO3 by making clear that the source element's job is to publish data while the target's job is to accept it, and the file-and-element walkthrough models the kind of complete interaction you will extend into a sortable list or Kanban board for MO4. None of the videos address accessibility, so the keyboard and ARIA work required by MO5 will come from the module readings and your own evaluation of these implementations.
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.