HTML Tutorial

The language for building web pages.

HTML Drag and Drop

HTML Drag and Drop API

In HTML, any element can be dragged and dropped. Drag and Drop is a very common feature. It is when you grab an object and drag it to a different location.

Steps to Implement:

Set draggable="true" on the element
Handle the ondragstart event to set data
Handle ondragover on the drop target (prevent default)
Handle ondrop to accept the dropped element

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family:Arial; text-align:center; padding:20px; }
  #dragItem {
    width:100px; height:100px; background:linear-gradient(135deg,#4e54c8,#8f94fb);
    color:white; display:flex; align-items:center; justify-content:center;
    border-radius:10px; cursor:grab; margin:auto; font-weight:bold; user-select:none;
  }
  #dropZone {
    width:200px; height:150px; border:3px dashed #ccc; border-radius:10px;
    margin:20px auto; display:flex; align-items:center; justify-content:center;
    color:#999; font-size:.9em; transition:.3s;
  }
  #dropZone.over { border-color:#4e54c8; background:#f0f2ff; color:#4e54c8; }
</style>
</head>
<body>
  <h2>Drag and Drop Demo</h2>
  <div id="dragItem" draggable="true" ondragstart="drag(event)">Drag Me!</div>
  <br>
  <div id="dropZone" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="this.classList.add('over')" ondragleave="this.classList.remove('over')">
    Drop Here
  </div>
  <button onclick="reset()" style="padding:8px 20px;border:none;background:#dc3545;color:white;border-radius:5px;cursor:pointer;">Reset</button>
  <script>
    function allowDrop(e) { e.preventDefault(); }
    function drag(e) { e.dataTransfer.setData("text", e.target.id); }
    function drop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData("text");
      e.target.appendChild(document.getElementById(data));
      e.target.classList.remove("over");
      e.target.style.borderColor = "#28a745";
    }
    function reset() {
      document.body.insertBefore(document.getElementById("dragItem"), document.getElementById("dropZone"));
      document.getElementById("dropZone").style.borderColor = "#ccc";
    }
  </script>
</body>
</html>

Result

Topics