Implementing Basic Drag-and-Drop Functionality

const draggableItem = document.getElementById('draggable');
const dropZone = document.getElementById('dropzone');

if (draggableItem && dropZone) {
  // Make the item draggable
  draggableItem.setAttribute('draggable', 'true');

  draggableItem.addEventListener('dragstart', (e) => {
    // Store the ID of the dragged element
    e.dataTransfer.setData('text/plain', e.target.id);
    e.target.style.opacity = '0.5'; // Visual feedback
  });

  draggableItem.addEventListener('dragend', (e) => {
    e.target.style.opacity = '1'; // Reset opacity
  });

  dropZone.addEventListener('dragover', (e) => {
    // Prevent default to allow drop
    e.preventDefault();
    dropZone.style.backgroundColor = '#e0ffe0'; // Visual feedback for drop zone
  });

  dropZone.addEventListener('dragleave', (e) => {
    // Reset background when item leaves
    dropZone.style.backgroundColor = '#f0f0f0';
  });

  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    // Get the ID of the dragged element
    const data = e.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(data);

    // Append the dragged element to the drop zone
    if (draggedElement) {
      dropZone.appendChild(draggedElement);
      dropZone.style.backgroundColor = '#d0ffd0'; // Success feedback
      draggedElement.style.position = 'relative'; // Adjust styling for dropped item
      draggedElement.style.left = '0';
      draggedElement.style.top = '0';
      draggedElement.textContent = 'Dropped!';
    }
  });
}

// Example of HTML structure and basic CSS:
/*
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    margin-bottom: 20px;
  }
  #dropzone {
    width: 300px;
    height: 200px;
    border: 2px dashed #ccc;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
  }
</style>
<div id="draggable">Drag Me</div>
<div id="dropzone">Drop Zone</div>
*/