drag-and-drop-effect.html

﻿<!DOCTYPE HTML>
<html>
  <head>
    <style>
      div {
        margin: 0em;
        padding: 2em;
      }

      #source {
        color: blue;
        border: 1px solid black;
      }

      #target {
        border: 1px solid black;
      }
    </style>
  </head> 
  <body>
    <div>
      <p id="source" ondragstart="dragstart_handler(event);" draggable="true">draggable</p>
    </div>
    <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
    <script>
      function dragstart_handler(ev) {
        document.body.append(`dragStart: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, document.createElement('br'));

        // Add this element's id to the drag payload so the drop handler will
        // know which element to add to its tree
        ev.dataTransfer.setData("text", ev.target.id);
        ev.dataTransfer.effectAllowed = "move";
      }

      function dragover_handler(ev) {
        document.body.append(`dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, document.createElement('br'));
        ev.preventDefault();
        // Set the dropEffect to move
        ev.dataTransfer.dropEffect = "move";
      }

      function drop_handler(ev) {
        document.body.append(`drop: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, document.createElement('br'));
        ev.preventDefault();

        // Get the id of the target and add the moved element to the target's DOM
        const data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </body>
</html>