Implement drag-and-drop functionality for elements, allowing users to drag items and drop them in a specified area.

Use Case: Drag and Drop File Upload

Allow users to drag files from their computer into a designated area to upload.

Example:

<div id="dropArea" style="width: 200px; height: 100px; border: 2px dashed black;">
  Drop files here
</div>

<script>
  const dropArea = document.getElementById('dropArea');

  dropArea.addEventListener('dragover', function(event) {
    event.preventDefault();
    dropArea.style.backgroundColor = 'lightgray';
  });

  dropArea.addEventListener('dragleave', function() {
    dropArea.style.backgroundColor = '';
  });

  dropArea.addEventListener('drop', function(event) {
    event.preventDefault();
    dropArea.style.backgroundColor = '';
    alert("Files dropped!");
    // Handle file processing here
  });
</script>