HTML Drag and Drop API Tutorial: Complete Guide with Examples for Beginners

HTML TUTORIALS-

HTML Drag and Drop API Tag –

Introduction-

How to Use the HTML Drag and Drop API: Complete Beginner to Advanced Tutorial

🔹HTML Drag and Drop API allows you to move elements around the page using your mouse (or touch). It's easy to useful for building custom UIs like sortable lists, file uploads, or drag-to-organize interfaces... Here's a basic example.

🔑 Key Parts: -

✅ draggable="true" — makes the element draggable.

✅ ondragstart, ondrop, ondragover — event handlers.

✅ dataTransfer.setData() and getData() — to move elements.

✅ Basic Example of HTML Drag and Drop:-

Basic Drag and Drop
Drag me
Drop here
<!DOCTYPE html> 
<html>
<head>
  <title>Basic Drag and Drop</title>
  <style>
    #dragme {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: white;
      text-align: center;
      line-height: 100px;
      cursor: move;
    }

    #dropzone {
      width: 200px;
      height: 150px;
      border: 2px dashed #ccc;
      margin-top: 20px;
    }
  </style>
</head>
<body>

<div id="dragme" draggable="true">Drag me</div>
<div id="dropzone">Drop here</div>

<script>
  const dragme = document.getElementById("dragme");
  const dropzone = document.getElementById("dropzone");

  dragme.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text", e.target.id);
  });

  dropzone.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  dropzone.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    dropzone.appendChild(document.getElementById(data));
  });
</script>

</body>
</html>

✅ Example 2: Reordering List Items:-

Reorder List 
<!DOCTYPE html>
<html>
<head>
  <title>Drag Images</title>
  <style>
    #gallery, #dropbox {
      border: 2px dashed gray;
      padding: 20px;
      min-height: 150px;
    }
    img {
      width: 100px;
      margin: 10px;
      cursor: move;
    }
  </style>
</head>
<body>

<div id="gallery">
  <img src="https://via.placeholder.com/100" draggable="true" id="img1">
  <img src="https://via.placeholder.com/100/ff4444" draggable="true" id="img2">
</div>

<div id="dropbox">Drop images here</div>

<script>
  const imgs = document.querySelectorAll("img");
  const dropbox = document.getElementById("dropbox");

  imgs.forEach(img => {
    img.addEventListener("dragstart", (e) => {
      e.dataTransfer.setData("text", e.target.id);
    });
  });

  dropbox.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  dropbox.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    const draggedImg = document.getElementById(data);
    dropbox.appendChild(draggedImg);
  });
</script>

</body>
</html>

✅ Example 3: Drag Images into Gallery:-

Drag Images
Drop images here
<!DOCTYPE html>
<html>
<head>
  <title>Drag Images</title>
  <style>
    #gallery, #dropbox {
      border: 2px dashed gray;
      padding: 20px;
      min-height: 150px;
    }
    img {
      width: 100px;
      margin: 10px;
      cursor: move;
    }
  </style>
</head>
<body>

<div id="gallery">
  <img src="https://via.placeholder.com/100" draggable="true" id="img1">
  <img src="https://via.placeholder.com/100/ff4444" draggable="true" id="img2">
</div>

<div id="dropbox">Drop images here</div>

<script>
  const imgs = document.querySelectorAll("img");
  const dropbox = document.getElementById("dropbox");

  imgs.forEach(img => {
    img.addEventListener("dragstart", (e) => {
      e.dataTransfer.setData("text", e.target.id);
    });
  });

  dropbox.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  dropbox.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    const draggedImg = document.getElementById(data);
    dropbox.appendChild(draggedImg);
  });
</script>

</body>
</html>

Live Code Preview

May Be Like Important Link-

-What Is HTML? A Complete Beginner-Friendly Explanation

-HTML Editor Online: Easy-to-Use Free HTML Editor for Beginners

-HTML Basic Tags Explained with Examples

-HTML Links Tag Tutorial: How to Use