HTML5元素拖放HTML5元素拖放相关事件：ondragstart、ondrag、ondragend、ondragen

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

一、元素拖放相关事件

给元素添加一个draggable属性，设置该属性为true，就能实现元素的拖放

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-元素拖放</title>
    <style>
      *{margin: 0; padding: 0;}
      img {
        width: 80px;
        position: absolute;
      }
    </style>
    <script>
      window.onload = function() {
        let img = document.getElementsByTagName("img")[0];
        let offsetX, offsetY;
        // 获取图片的初始坐标
        // e.offsetX e.offsetY分别表示鼠标相对于触发事件的对象的X标标 Y坐标
        img.ondragstart = function(e) {
          offsetX = e.offsetX;
          offsetY = e.offsetY;
        }
        img.ondrag = function(e) {
          if (e.pageX==0 && e.pageY==0) {
            return;
          }
          //e.pageX e.pageY分别表示鼠标相对于当前窗口的X坐标 Y坐标
          img.style.left = (e.pageX - offsetX) + 'px';
          img.style.top = (e.pageY - offsetY) + 'px';
        }
      }
    </script>
  </head>
  <body>
    <img src="img/111.jpeg" alt="" draggable="true">
  </body>
</html>

二、元素拖放dataTransfer对象

dataTransfer对象主要用于在“源元素”与“目标元素”之间传递数据，其中包含两个重要方法：

setData()

语法：setData(format, data)
- format:
  - text/plain 文本文字格式
  - text/html HTML代码格式
  - text/xml XML字符格式
  - text/url-list URL列表格式
示例：

source.ondragstart = function(e) {

e.dataTransfer.setData("text/plain", e.target.id)

}

getData()

语法：getData(format)
示例：

dest.ondrop = function(e) {

e.dataTransfer.getData("text/plain");

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09-元素拖放-dataTransfer对象</title>
    <style>
      ul {
        width: 120px;
        height: 120px;
        border: 1px solid silver;
      }
    </style>
    <script>
      window.onload = function() {
        let oLi = document.getElementsByTagName("li");
        let oBox = document.getElementById("box");
        for(let i=0;i<oLi.length;i++) {
          oLi[i].ondragstart = function(e) {
            e.dataTransfer.setData("text/plain",e.target.id);
          }
          // 屏蔽元素的默认行为，否则ondrop不会被触发
          oBox.ondragover = function(e) {
            e.preventDefault();
          }
          oBox.ondrop = function(e) {
            let id = e.dataTransfer.getData("text/plain");
            oBox.appendChild(document.getElementById(id));
          }
        }
      }
    </script>
  </head>
  <body>
    <ul id="list">
      <li draggable="true" id="li1">HTML</li>
      <li draggable="true" id="li2">CSS</li>
      <li draggable="true" id="li3">JAVASCRIPT</li>
      <li draggable="true" id="li4">Vue</li>
      <li draggable="true" id="li5">React</li>
    </ul>
    <ul id="box"></ul>
  </body>
</html>

三、元素拖放——垃圾箱效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-元素拖放-垃圾箱效果</title>
    <style>
      #bigBox {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: hotpink;
      }
      #smallBox {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: lightskyblue;
      }
    </style>
    <script>
      window.onload = function() {
        let bigBox = document.getElementById("bigBox");
        let smallBox = document.getElementById("smallBox");

        bigBox.ondragover = function(e) {e.preventDefault();}
        bigBox.ondrop = function(e) {
          smallBox.parentNode.removeChild(smallBox);
        }
      }
    </script>
  </head>
  <body>
    <div id="bigBox"></div>
    <div id="smallBox" draggable="true"></div>
  </body>
</html>