Drag and drop is one of the few interaction patterns that users already understand before they ever see your interface: grab something, move it, let go. HTML5 includes a native Drag and Drop API that lets you build this behavior without an external library. The API is built from a small set of pieces — the draggable attribute that marks an element as movable, a sequence of events fired on the source and on the potential drop target, and the DataTransfer object that carries data (and dragged files) from the source to the target.
In this course the API matters because it sits at the intersection of DOM events, data handling, and user experience. Sortable lists, Kanban boards, file upload zones, image galleries, and shopping-cart builders are all common use cases you may be asked to build. The API is supported broadly in modern desktop browsers, but behavior differs across browsers and is weak on touch devices, so understanding compatibility limits is part of learning the topic.
As you watch the videos below, pay attention to three things: which element each event listener is attached to (the dragged item versus the drop zone), where and why preventDefault() is called, and how data moves through dataTransfer. Notice also the distinction between dragging elements already on the page and dragging files in from the operating system — both use the same API but handle data differently.
This tutorial walks through drag-and-drop in JavaScript for both files dropped into the browser and HTML elements moved around the page, and it also demonstrates using a plugin to extend drag-and-drop behavior. Expect to see draggable elements set up, drop zones defined, and the event handlers that connect them. The file-dropping portion shows how dragged content is read once it is released on a target.
It covers the two most common use cases — elements and files — in a single compact walkthrough, which maps directly to the use-case and draggable-element subtopics and gives a sense of when a library might be used instead of the raw API.
Part of a structured beginner JavaScript course, this lesson focuses narrowly on the dragstart event: how it fires, how to detect it, and how to attach a listener to a draggable element. Because it isolates a single event, it is a good way to see where the drag lifecycle actually begins before other events are layered on.
The instructor is a computer science educator producing a sequenced course, so the explanation is paced for beginners and fits precisely the core-events subtopic by examining the first event in the drag lifecycle.
A longer, project-style tutorial that builds a drag-and-drop zone for image files, letting users drag images from their computer into the browser and see an instant preview. It should cover setting up the drop target, handling the drag events on that target, and retrieving the dropped files for display.
The file-drop scenario is where the DataTransfer object does its most visible work, making this a practical illustration of how data moves from source to target and a realistic example of a common drag-and-drop use case.
Together these videos build the foundation the module outcomes depend on. The dragstart-focused lesson and the two applied tutorials introduce the core events, the draggable attribute, and the DataTransfer object (MO1), and show those event listeners being written and wired to real elements (MO2). Watching element-dragging and file-dragging side by side helps you see why each event exists and how the drop target must accept the drag before data can be transferred (MO3). The image-preview and element-reordering examples serve as models for the larger interactive component you will construct (MO4). None of the videos address accessibility directly, so treat that gap as your own evaluation exercise: as you watch, note where a keyboard alternative or ARIA attribute would be needed (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.
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.
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.
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.
Up to this point you have examined the HTML5 Drag and Drop API one event at a time. In this topic you put the pieces together and build a complete interactive component — typically a sortable list or a Kanban-style board — where items can be picked up, dragged across containers, and dropped into a new position. The work begins before any code: planning what the component must do, deciding which elements are draggable, which are drop targets, and what data each dragged item carries.
From there you build the markup (draggable="true", container and item structure, data attributes for identifiers), wire up dragstart to stash an identifier on the dataTransfer object, use dragover with preventDefault() to declare a valid drop zone, and finish in drop by moving or reordering the DOM nodes. Just as important is what happens behind the visible interface: the underlying data model — the array or object that represents your list or board — must stay in sync with the DOM, or the component will look correct but behave incorrectly on save, refresh, or re-render. Finally, because pointer-based dragging excludes keyboard and screen-reader users, you add keyboard alternatives, ARIA attributes, and clear visual affordances.
The three videos below approach the same problem from different angles: native browser API, a framework component library, and a reusable framework-level abstraction. While watching, track three things — where state is stored, how each event handler contributes to the interaction lifecycle, and what the implementation does (or fails to do) for users who are not using a mouse. Being able to compare a hand-written implementation to a library-provided one is useful even if your project uses only vanilla JavaScript.
A compact walkthrough of drag-and-drop in plain JavaScript that, based on its title and description, covers both dragging HTML elements around the page and dragging files into the browser, and also mentions using a plugin for added functionality. Expect to see the markup setup, the core event listeners, and the handler logic that moves an element to a new container.
This is the closest match to the hand-coded, framework-free approach used in this course, so it maps directly onto the HTML structure, dragstart, dragover, and drop subtopics without hiding the API behind a library.
A mid-level tutorial from Decoded Frontend on the Angular Material CDK drag-and-drop module, focused specifically on transferring items between multiple lists. It is likely to show connected drop lists, reordering within a list, moving items across lists, and the events the CDK exposes when a drop occurs.
The multi-list scenario is exactly the Kanban-style pattern this topic targets, and because CDK drop handlers require you to update the backing arrays yourself, it illustrates the state-and-data-model subtopic very clearly.
This video builds a minimal draggable element and drop zone in Svelte using the browser's native Drag and Drop API, packaged as reusable Svelte actions. Expect attention to how the native events are attached and cleaned up, and how the same behavior can be applied to many elements without repeating code.
It demonstrates the native API being wrapped into a reusable abstraction, which reinforces the planning subtopic and shows how to keep drag logic separate from component markup and state.
Together these videos reinforce the module outcomes at the point where they come together in a real build. The vanilla JavaScript walkthrough and the Svelte action video both work directly with the native events and the DataTransfer object, supporting MO1, MO2, and MO3 by showing which handler does what and why preventDefault() on dragover matters. The Angular CDK video and the multi-list reordering pattern it demonstrates support MO4, since a working sortable or Kanban component requires that the DOM and the underlying data arrays update in step. None of the videos is a dedicated accessibility lesson, so for MO5 you should watch each implementation critically and note where keyboard operation, focus handling, and ARIA attributes would need to be added before the component could be considered complete.
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.