Implement Drag and Drop Functionality

document.addEventListener('DOMContentLoaded', () => {
  const draggableItems = document.querySelectorAll('.draggable');
  const dropZones = document.querySelectorAll('.dropzone');

  let draggedItem = null;

  draggableItems.forEach(item => {
    item.setAttribute('draggable', true);
    item.addEventListener('dragstart', (e) => {
      draggedItem = item;
      setTimeout(() => {
        item.style.opacity = '0.5';
      }, 0);
    });

    item.addEventListener('dragend', () => {
      draggedItem.style.opacity = '1';
      draggedItem = null;
    });
  });

  dropZones.forEach(zone => {
    zone.addEventListener('dragover', (e) => {
      e.preventDefault(); // Allows the drop
      zone.style.backgroundColor = '#f0f0f0';
    });

    zone.addEventListener('dragleave', () => {
      zone.style.backgroundColor = '';
    });

    zone.addEventListener('drop', (e) => {
      e.preventDefault();
      if (draggedItem) {
        zone.appendChild(draggedItem); // Move the item to the dropzone
      }
      zone.style.backgroundColor = '';
    });
  });
});
/*
HTML structure example:
<style>
  .draggable { border: 1px solid blue; padding: 10px; margin: 5px; background-color: lightblue; cursor: grab; }
  .dropzone { border: 2px dashed gray; padding: 20px; min-height: 100px; margin: 10px; }
</style>
<div class="dropzone">Drop Zone 1
  <div class="draggable">Draggable Item 1</div>
</div>
<div class="dropzone">Drop Zone 2</div>
*/