Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The Drag and Drop API lets you make elements draggable and create drop zones. Perfect for file uploads, sortable lists, or kanban boards!
Drag items between boxes!
<div style="max-width: 700px; margin: 0 auto; font-family: sans-serif;">
<h2 style="color: #10b981; margin-bottom: 20px;">🎯 Drag & Drop Demo</h2>
<p style="color: #64748b; margin-bottom: 20px;">Try dragging items between the boxes:</p>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
<!-- Source Box -->
<div class="drop-zone" id="box1" style="min-height: 200px; padding: 20px; background: #d1fae5; border: 3px dashed #10b981; border-radius: 8px;">
<h3 style="color: #065f46; margin-top: 0;">📦 Source</h3>
<div class="drag-item" draggable="true" style="padding: 12px; margin-bottom: 10px; background: white; border-radius: 6px; cursor: move; border: 2px solid #10b981;">
📄 Item 1
</div>
<div class="drag-item" draggable="true" style="padding: 12px; margin-bottom: 10px; background: white; border-radius: 6px; cursor: move; border: 2px solid #10b981;">
📄 Item 2
</div>
<div class="drag-item" draggable="true" style="padding: 12px; background: white; border-radius: 6px; cursor: move; border: 2px solid #10b981;">
📄 Item 3
</div>
</div>
<!-- Target Box -->
<div class="drop-zone" id="box2" style="min-height: 200px; padding: 20px; background: #dbeafe; border: 3px dashed #3b82f6; border-radius: 8px;">
<h3 style="color: #1e40af; margin-top: 0;">🎯 Target</h3>
<p style="color: #64748b; font-size: 14px;">Drop items here!</p>
</div>
</div>
<div style="margin-top: 20px; padding: 15px; background: #fef3c7; border-radius: 6px; border-left: 4px solid #f59e0b;">
<strong style="color: #92400e;">💡 Tip:</strong>
<span style="color: #78350f;"> Drag items back and forth between boxes!</span>
</div>
</div>Loading preview...
// HTML: Add draggable attribute
<div id="item" draggable="true">Drag me!</div>
// JavaScript: Handle drag start
const item = document.getElementById('item');
item.addEventListener('dragstart', (e) => {
// Store data to transfer
e.dataTransfer.setData('text/plain', e.target.id);
// Optional: Add visual feedback
e.target.style.opacity = '0.5';
});
item.addEventListener('dragend', (e) => {
// Reset visual feedback
e.target.style.opacity = '1';
});
// 🎯 That's it! Element is now draggable// HTML
<div id="dropZone">Drop here</div>
// JavaScript: Set up drop zone
const dropZone = document.getElementById('dropZone');
// 1. Allow dropping (important!)
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // Must prevent default to allow drop
dropZone.style.background = '#d1fae5';
});
// 2. Handle drop
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
// Get dropped data
const data = e.dataTransfer.getData('text/plain');
console.log('Dropped:', data);
// Get the dragged element
const draggedElement = document.getElementById(data);
// Move element to drop zone
dropZone.appendChild(draggedElement);
});
// 3. Reset styling when drag leaves
dropZone.addEventListener('dragleave', () => {
dropZone.style.background = 'white';
});
// 🎯 preventDefault() is crucial for drops to work!Drag tasks between columns
Drag files from desktop to upload
Reorder items by dragging
Drag components to build layouts
<div draggable="true">Drag me</div>
element.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text', data);
});dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // Enable dropping
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
});⚡ Key: Always call preventDefault() in dragover!
Add to HTML element
Makes it draggable
Call in dragover
Enables dropping
Store/retrieve data
Pass info on drop
Change opacity/style
Show drag state
preventDefault() in dragover!