Drag and Drop in HTML
Enable Draggable Elements and Drop Targets

Drag and Drop in HTML: Make Elements Move with Purpose

Want to let users drag a banana image into a basket? Reorder a to-do list? Rearrange photos? The HTML Drag and Drop API gives you full control over interactive movement between elements using simple JavaScript events.

How Drag and Drop Works

At its core, drag and drop involves three pieces:

1. A draggable source element
2. A target (drop zone)
3. JavaScript to handle the transfer

Step 1: Enable Dragging

Use the draggable="true" attribute on any HTML element to make it draggable.

<img src="banana.png" id="banana" width="100" draggable="true">

Step 2: Set Up the Drop Zone

You need a container that allows drops. You do this by listening for the dragover and drop events in JavaScript.

<div id="basket" style="width:200px;height:120px;border:2px dashed #aaa;text-align:center;padding-top:40px;">
  Drop banana here
</div>

Step 3: Write JavaScript to Handle Drag and Drop Events

const banana = document.getElementById('banana');
const basket = document.getElementById('basket');

// Start drag
banana.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', 'banana');
});

// Allow drop
basket.addEventListener('dragover', (e) => {
  e.preventDefault(); // Required to allow dropping
});

// Handle drop
basket.addEventListener('drop', (e) => {
  e.preventDefault();
  basket.innerHTML = '🍌 Banana dropped!';
});

[ Drag the banana → Drop it → Message updates in drop zone ]

Customizing Drag Feedback

Use dataTransfer.setDragImage() to change the ghost image shown during drag:

banana.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', 'banana');
  const dragIcon = document.createElement('img');
  dragIcon.src = 'banana.png';
  dragIcon.width = 80;
  e.dataTransfer.setDragImage(dragIcon, 10, 10);
});

Multiple Drop Zones

<div id="basket1">Drop into Basket 1</div>
<div id="basket2">Drop into Basket 2</div>

<script>
function enableDrop(id) {
  const basket = document.getElementById(id);
  basket.addEventListener('dragover', e => e.preventDefault());
  basket.addEventListener('drop', e => {
    e.preventDefault();
    basket.textContent = '🍒 Dropped!';
  });
}
enableDrop('basket1');
enableDrop('basket2');
</script>

Best Practices

• Always call preventDefault() on dragover to allow dropping
• Use setData() and getData() to transfer useful info
• Give visual cues for active drop targets using CSS

Styling Drag Feedback

You can style your drop zone dynamically using dragenter and dragleave events:

basket.addEventListener('dragenter', () => {
  basket.style.background = '#eef';
});
basket.addEventListener('dragleave', () => {
  basket.style.background = '';
});

Summary

Drag and Drop in HTML allows for intuitive, click-free movement of items across the UI. You now know how to:

• Enable elements to be dragged
• Design drop zones and capture drop events
• Customize drag visuals with setDragImage()
• Style feedback to enhance UX

What’s Next?

Coming up: Take interactivity to the next level with the Geolocation API — learn how to find a user’s position and use it to personalize their experience.