A reading that introduces the HTML5 Drag and Drop API, explaining what it is, how browsers support it, and the core concepts behind draggable elements, used by learners to build foundational understanding before writing any code.
Topics
This module covers 6 topics. Open a topic to see its subtopics.
Module Content
13 items.
-
-
A reading that explains how to make HTML elements draggable using the draggable attribute and the native Drag and Drop API, guiding learners through the first practical step of implementing drag-and-drop behaviour in a webpage.
-
A reading that covers the dragstart event in depth — what triggers it, how to use the DataTransfer object to attach data, and how to set visual feedback — teaching learners how to initialise a drag operation correctly.
-
A reading that explains the dragover event, why calling preventDefault() on it is required to designate a valid drop target, and how to use it as a gatekeeper in drag-and-drop interactions, helping learners enable droppable areas.
-
A reading that describes the drop event — how to retrieve DataTransfer data, identify the dragged element, and update the DOM to reflect a completed drop — teaching learners how to finalise a drag-and-drop interaction.
-
A reading that walks learners through constructing a complete drag-and-drop UI component by combining HTML structure, the native API, JavaScript event handling, data-model management, and accessibility considerations into a cohesive example.
-
A reading that walks learners through constructing a complete drag-and-drop UI component by combining HTML structure, the native API, JavaScript event handling, data-model management, and accessibility considerations into a cohesive example.
-
An overview lesson introducing the native HTML5 Drag and Drop API, explaining the draggable attribute, the sequence of drag events, and the DataTransfer object so learners gain a conceptual map before writing code.
-
A lesson on preparing drag sources, covering how to apply the draggable attribute to elements and attach JavaScript that identifies which element the user grabbed when a drag begins.
-
A focused lesson on the dragstart event, showing learners how to specify what is being dragged, attach data with setData, and control the drag image at the moment the drag operation starts.
-
A lesson on handling the drop event, teaching learners to designate valid drop targets, prevent default browser behavior, retrieve data stored during dragstart, and update the page accordingly.
-
A capstone lesson that combines the individual drag events into a complete interactive component such as a sortable list or Kanban board, including planning the markup and containers before coding.
-
A combined module page that compiles all five drag-and-drop topics into a single continuous document for review, reading offline, or instructor presentation of the full unit.