Drag and Drop

HTML

// Wait for the DOM to be fully loaded before executing the script
document.addEventListener("DOMContentLoaded", function () {
  const draggable = document.getElementById("draggable") as HTMLElement;
  const dropzones = document.querySelectorAll(".dropzone");

  draggable.addEventListener("dragstart", function (event: DragEvent) {
    // Store the id of the draggable element
    if (event.dataTransfer) {
      event.dataTransfer.setData("text", (event.target as HTMLElement).id);
    } else {
      console.error("DragEvent does not support dataTransfer");
    }
  });

  dropzones.forEach((dropzone) => {
    dropzone.addEventListener("dragover", function (event: DragEvent) {
      // Prevent default behavior to allow drop
      event.preventDefault();
    });

    dropzone.addEventListener("drop", function (event: DragEvent) {
      event.preventDefault();
      if (event.dataTransfer) {
        const data = event.dataTransfer.getData("text");
        const draggableElement = document.getElementById(data);

        try {
          // Check if the dropzone is empty before adding the draggable element
          if (dropzone.children.length === 0 && draggableElement) {
            dropzone.appendChild(draggableElement);
          } else {
            throw new Error(
              "Dropzone is not empty or draggable element not found",
            );
          }
        } catch (error) {
          console.error("Error during drop operation:", error);
        }
      } else {
        console.error("DragEvent does not support dataTransfer");
      }
    });
  });
});

HTML Drag And DropCSS Drag And DropJS Drag And Drop