css-demo
/
drag-drop.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Drag and Drop</title>
  <style>
    div {
      margin: 0em;
      padding: 2em;
    }

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

    #target {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <section>
    <h1>
      <code>DataTransfer.setData()</code> <br>
      <code>DataTransfer.getData()</code> <br>
      <code>DataTransfer.clearData()</code>
    </h1>
    <div>
      <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
        Select this element, drag it to the Drop Zone and then release the selection to move the element.
      </p>
    </div>
    <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
      Drop Zone
    </div>
  </section>
  <!-- js -->
  <script>
    function dragstart_handler(ev) {
      console.log("dragStart");
      // Change the source element's background color to signify drag has started
      ev.currentTarget.style.border = "dashed";
      // Set the drag's format and data. Use the event target's id for the data
      ev.dataTransfer.setData("text/plain", ev.target.id);
    }

    function dragover_handler(ev) {
      console.log("dragOver");
      // prevent Default event
      ev.preventDefault();
    }

    function drop_handler(ev) {
      console.log("Drop");
      ev.preventDefault();
      // Get the data, which is the id of the drop target
      var data = ev.dataTransfer.getData("text");

      console.log("data",data);

      // appendChild
      ev.target.appendChild(document.getElementById(data));
      // Clear the drag data cache (for all formats/types)
      ev.dataTransfer.clearData();
    }
  </script>


</body>

</html>