HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>dragstart setData</title>

  <style>

    .box { padding: 16px 24px; background: #8b5cf6; color: #fff; border-radius: 8px; cursor: grab; display: inline-block; user-select: none; }

    #log { margin-top: 16px; font-family: monospace; }

  </style>

</head>

<body>

  <div id="draggable" class="box" draggable="true">Drag me</div>

  <p id="log">Drop data will appear after you drag (see drop zone below).</p>

  <div id="dropzone" style="margin-top:20px;padding:40px;border:2px dashed #94a3b8;border-radius:8px;">Drop here</div>

  <script>

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

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

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

      e.dataTransfer.setData('text/plain', 'Hello from dragstart!');

    });

    dropzone.addEventListener('dragover', function (e) { e.preventDefault(); });

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

      e.preventDefault();

      document.getElementById('log').textContent = 'Received: ' + e.dataTransfer.getData('text/plain');

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Drag and Drop — dragstart & setData