<!DOCTYPE html>
<html>
  <head>
    <title>Drag-and-drop test</title>
    <style>
      #drop {
        width: 5em;
        height: 5em;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="drag" draggable="true">drag me</div>
    <div id="drop"></div>
    <script>
      window.didDragStart = false;
      window.didDragEnter = false;
      window.didDragOver = false;
      window.didDrop = false;
      const drag = document.getElementById('drag');
      const drop = document.getElementById('drop');
      drag.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('id', event.target.id);
        window.didDragStart = true;
      });
      drop.addEventListener('dragenter', function(event) {
        event.preventDefault();
        window.didDragEnter = true;
      });
      drop.addEventListener('dragover', function(event) {
        event.preventDefault();
        window.didDragOver = true;
      });
      drop.addEventListener('drop', function(event) {
        event.preventDefault();
        const id = event.dataTransfer.getData('id');
        const el = document.getElementById(id);
        if (el) {
          event.target.appendChild(el);
          window.didDrop = true;
        }
      });
    </script>
  </body>
</html>
