components/test/data/actor/drag_dom_node_id.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <title>Test Page</title>
    <style>
      #fromTarget {
        width: 100px;
        height: 100px;
        background-color: lightblue;
      }

      #toTarget {
        position: absolute;
        top: 400px;
        left: 200px;
        width: 100px;
        height: 100px;
        background-color: coral;
      }
    </style>
  </head>
    <div id="fromTarget" aria-label="fromTarget">Drag Me</div>
    <div id="toTarget" aria-label="toTarget">Drop Here</div>

    <script>
      let event_log = [];
      let log_handler =
          e => event_log.push(`${e.type}#${e.target.id}`);

      const fromTarget = document.getElementById('fromTarget');
      fromTarget.addEventListener('mousedown', log_handler);
      fromTarget.addEventListener('mousemove', log_handler);
      fromTarget.addEventListener('mouseup', log_handler);

      const toTarget = document.getElementById('toTarget');
      toTarget.addEventListener('mousedown', log_handler);
      toTarget.addEventListener('mousemove', log_handler);
      toTarget.addEventListener('mouseup', log_handler);
    </script>
  </body>
</html>