HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Draggable element</title>

  <style>

    .box {

      width: 120px;

      height: 60px;

      background: #3b82f6;

      color: #fff;

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: 8px;

      cursor: grab;

      user-select: none;

    }

  </style>

</head>

<body>

  <h1>Draggable box</h1>

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

  <p>Try dragging the blue box with your mouse.</p>

  <script>

    document.getElementById('box').addEventListener('dragstart', function (e) {

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

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Drag and Drop — Draggable Element