Fri Mar 15 2024

Drag & Drop Functionality for Images

File Name: drag-and-drop-image.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drag & Drop Image</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />

    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: "Poppins", sans-serif;
      }

      .container {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 100px;
      }

      .dropBox {
        position: relative;
        width: 200px;
        height: 200px;
        border: 2px dashed #9a9a9a;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .dropBox img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="dropBox">Drop Image Here</div>
      <div class="dropBox">Drop Image Here</div>
    </div>
    <script>
      const dropAreas = document.querySelectorAll(".dropBox");

      dropAreas.forEach((dArea) => {
        dArea.addEventListener("dragover", (event) => {
          event.preventDefault();
        });

        dArea.addEventListener("dragstart", (event) => {
          const elements = dArea.children;
          event.dataTransfer.setData("text/plain", elements[0].src);
        });

        dArea.addEventListener("dragleave", (event) => {
          event.preventDefault();
          dArea.innerHTML = "Drop Image Here";
        });

        dArea.addEventListener("drop", (event) => {
          event.preventDefault();

          const files = event.dataTransfer.files;

          if (files.length > 0) {
            const file = files[0];
            if (file.type.startsWith("image/")) {
              const reader = new FileReader();
              reader.onload = (event) => {
                const img = new Image();
                img.src = event.target.result;
                img.draggable = true;

                dArea.innerHTML = "";
                dArea.appendChild(img);
              };
              reader.readAsDataURL(file);
            } else {
              alert("Please drop an image file only!");
            }
          } else {
            dArea.innerHTML = "";
            const imgPath = event.dataTransfer.getData("text/plain");
            const img = new Image();
            img.src = imgPath;
            img.draggable = true;

            dArea.innerHTML = "";
            dArea.appendChild(img);
          }
        });
      });
    </script>
  </body>
</html>

Result Screenshot(s)

Drag & Drop Functionality for ImagesWorking Sample0

Author:Geekboots