Drag and Drop

HTML5 drag and drop API, file drops, sortable lists, and custom drag images.

Overview

HTML5 provides native drag and drop functionality.

Key Concepts

• Draggable Attribute — Make elements draggable
• Drag Events — dragstart, drag, dragend
• Drop Events — dragenter, dragover, drop
• Data Transfer — Pass data between elements
• File Drops — Handle file uploads

Code Examples

<div class="container">
  <div class="draggable" draggable="true" data-id="1">Item 1</div>
  <div class="draggable" draggable="true" data-id="2">Item 2</div>
  <div class="draggable" draggable="true" data-id="3">Item 3</div>
</div>

<div class="dropzone">Drop here</div>

<script>
const draggables = document.querySelectorAll('.draggable');
const dropzone = document.querySelector('.dropzone');

draggables.forEach(draggable => {
  draggable.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', draggable.dataset.id);
    draggable.classList.add('dragging');
  });

  draggable.addEventListener('dragend', () => {
    draggable.classList.remove('dragging');
  });
});

dropzone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropzone.classList.add('dragover');
});

dropzone.addEventListener('dragleave', () => {
  dropzone.classList.remove('dragover');
});

dropzone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  dropzone.appendChild(document.querySelector(`[data-id="${id}"]`));
  dropzone.classList.remove('dragover');
});

// File drop zone
const fileDropzone = document.getElementById('fileDropzone');

fileDropzone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

fileDropzone.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  
  Array.from(files).forEach(file => {
    const reader = new FileReader();
    reader.onload = (event) => {
      console.log(file.name, event.target.result);
    };
    reader.readAsDataURL(file);
  });
});
</script>

Practice

Build a sortable list with drag and drop and file upload drop zone.