Intermediate LevelHTML & Semantic Web
How does the native HTML5 Drag and Drop API function?
❓ Interview Prompt: Explain draggable="true", drag events (ondragstart, ondragover, ondrop), DataTransfer object, and dropping payloads.
HTML5 includes a native Drag and Drop API for dragging elements across the DOM:
Setup Steps:
1
Set 'draggable="true"' on the source element.
2
Add 'ondragstart' handler to attach data to 'event.dataTransfer.setData(format, data)'.
3
On target container, call 'event.preventDefault()' inside 'ondragover' to permit dropping.
4
Handle 'ondrop' to retrieve data via 'dataTransfer.getData()'.
Code Implementation Example
html
<!-- Draggable Source Item -->
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'item-101')">
Drag Me
</div>
<!-- Target Drop Zone -->
<div ondragover="event.preventDefault()" ondrop="const id = event.dataTransfer.getData('text'); this.appendChild(document.getElementById(id));">
Drop Zone
</div>💡Native HTML5 Drag and Drop API implementation with dataTransfer.
🎯 Interview Key Takeaway
Use draggable="true", dataTransfer.setData(), and preventDefault() on dragover to implement native drag-and-drop UI.
#Drag and Drop#HTML5 API#dataTransfer#Intermediate
Back to all HTML & Semantic Web Questions→