Drag-and-drop combines pointer events, data transfer objects, and optional file integration.
Accessibility mandate
- Provide keyboard-operable flows duplicating drag actions.
- Announce changes via live regions when lists reorder.
HTML hooks
draggable="true"on sources.- Drop zones listening for
dragenter/dragover/drop.
Files API synergy
input type="file" plus transparent overlays often delivers simpler UX than custom-only drag surfaces.
Touch devices
Drag isn’t universally discoverable—pair with buttons (“Move up/down”) mirroring reorder intent for accessibility and mobility limitations.
HTML attributes involved
<ul>
<li draggable="true" id="task-1">Write copy</li>
<li draggable="true" id="task-2">Ship feature</li>
</ul>
<div id="dropzone">Drop here (needs JS: preventDefault on dragover)</div>Native DnD still requires script for dragover/drop handlers—this lesson shows the declarative hooks only.
Rendered list items (draggable attribute present)
- Task one (try dragging—drop needs your script)
- Task two
Important interview questions and answers
- Q: What does progressive enhancement mean in API-driven pages?
A: Core tasks should work with baseline HTML first, then richer APIs enhance experience when supported. - Q: Why is feature detection better than browser sniffing?
A: It checks actual capability, avoids brittle UA assumptions, and degrades gracefully. - Q: What is the first accessibility check before shipping any page?
A: Verify keyboard-only task completion with visible focus and meaningful accessible names.
Tip: Drag-drop must be keyboard-accessible—provide alternate actions.