HTML Drag and Drop

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.

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

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

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

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>

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 ]

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);
});

<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>

• 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

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 = '';
});

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

Choose the option that lists all and only the correct statements.

1. dragstart
2. dragover
3. drop
4. dragend
5. onclick

Choose the option that lists all and only the correct statements.

1. event.dataTransfer.setData()
2. event.dataTransfer.getData()
3. event.dataTransfer.clearData()
4. event.dataTransfer.dropEffect

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.