H5新特性之拖拽知识点: div.addEventListener("drag", e => {}); div.addE

知识点:

div.addEventListener("drag", e => {});
div.addEventListener("drop", e => {});
div.addEventListener("dragover", e => {});
<img draggable="true" />

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      #box {
        width: 120px;
        height: 120px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }

      #box #pic {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <p>请把图片拖放到矩形中：</p>

    <div id="box"></div>

    <img
      id="pic"
      src="https://avatars.githubusercontent.com/u/20128368?v=4"
      draggable="true"
    />
  </body>

  <script>
    const box = document.getElementById("box");
    const pic = document.getElementById("pic");

    pic.addEventListener("drag", (e) => {});

    box.addEventListener("drop", (e) => {
      box.appendChild(pic);
    });

    box.addEventListener("dragover", (e) => {
      e.preventDefault(); // 不写这句将无法触发drop函数
    });
  </script>
</html>