Drag and Drop

HTML

document.addEventListener("DOMContentLoaded", function () {
  const draggable = document.getElementById("draggable");
  const dropzones = document.querySelectorAll(".dropzone");

  draggable.addEventListener("dragstart", function (event) {
    // Store the id of the draggable element
    event.dataTransfer.setData("text", event.target.id);
  });

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

    dropzone.addEventListener("drop", function (event) {
      event.preventDefault();
      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);
      }
    });
  });
});

HTML Drag And DropCSS Drag And DropTS Drag And Drop