HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Drag and Drop Example</title>

  <style>

    #draggable {

      width: 100px;

      height: 100px;

      background: #38bdf8;

      color: #fff;

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: 8px;

      cursor: grab;

      user-select: none;

    }

    #dropzone {

      width: 200px;

      height: 200px;

      background: #dcfce7;

      border: 2px dashed #22c55e;

      margin-top: 20px;

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: 8px;

    }

    #dropzone.over { background: #bbf7d0; }

  </style>

</head>

<body>

  <h1>Drag and Drop Demo</h1>

  <div id="draggable" draggable="true">Drag me!</div>

  <div id="dropzone">Drop here</div>

  <script>

    var draggable = document.getElementById('draggable');

    var dropzone = document.getElementById('dropzone');



    draggable.addEventListener('dragstart', function (e) {

      e.dataTransfer.setData('text/plain', 'Dragged Data');

    });



    dropzone.addEventListener('dragover', function (e) {

      e.preventDefault();

      dropzone.classList.add('over');

    });



    dropzone.addEventListener('dragleave', function () {

      dropzone.classList.remove('over');

    });



    dropzone.addEventListener('drop', function (e) {

      e.preventDefault();

      dropzone.classList.remove('over');

      var data = e.dataTransfer.getData('text/plain');

      dropzone.textContent = 'Dropped data: ' + data;

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Drag and Drop — Complete Example