HTML5 新特性 - 拖放 drag

拖放拖放是将一个对象从一个位置拖拽到另一个位置的操作. 任何HTML元素都可以进行拖放操作. 但是为了保证兼容性, 建议在拖放的对象上添加属性:<h1 draggable="true">xxxxx</h1>DragEvent拖拽相关事件DragEvent指拖拽相关事件. 其继承自MouseEvent与Event接口.拖拽事件涉及到的事件源有两类(源对象, 目标对象), 一共

黑猫了个怪怪

484人浏览 · 2021-12-09 08:32:32

黑猫了个怪怪 · 2021-12-09 08:32:32 发布

拖放

拖放是将一个对象从一个位置拖拽到另一个位置的操作. 任何HTML元素都可以进行拖放操作. 但是为了保证兼容性, 建议在拖放的对象上添加属性:

<h1 draggable="true">xxxxx</h1>

`DragEvent`拖拽相关事件

DragEvent指拖拽相关事件. 其继承自MouseEvent与Event接口.

拖拽事件涉及到的事件源有两类(源对象, 目标对象), 一共包含7种相关事件, 分别为不同的事件源进行绑定.

源对象事件

正在拖拽的元素属于源对象. 针对源对象有以下事件:

dragstart 开始拖拽源对象时触发

drag 源对象拖拽过程中触发(持续触发)

dragend 源对象拖拽结束时触发

目标对象事件

将拖拽的元素移动到div的上方并释放, 会相继触发div(目标对象)拖拽相关事件:

dragenter 当源对象被拖进目标对象时, 触发目标对象的dragenter

dragover 当源对象被拖进目标悬停时, 触发目标对象的dragover

dragleave 当源对象被拖进目标又离开时时, 触发目标对象的dragleave

drop 当源对象在目标对象内部释放时触发

注意:

在dragover中需要加入: event.preventDefault()阻止浏览器的默认行为. 否则将不会触发目标对象的drop事件.

针对firefox浏览器的兼容, 还需要在drop事件处理中, 添加如下代码:
event.preventDefault()
event.stopPropagation()

拖拽过程中的数据传输

若希望实现上述需求, 需要在捕获源对象的dragstart事件, 存储一些数据(标签名/内容文本等). 当触发目标对象的drop事件时, 取出当时存储的数据, 动态生成dom元素, 追加到div中, 即可实现需求.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <p id="p1" draggable="true">1111111111111</p>
    <span draggable="true" id="s1">2222 </span>
    <div id="div"></div>

    <script>
      //源对象事件
      p1.addEventListener("dragstart", function (event) {
        //将当前标签的相关参数，存储到dataTransfer对象
        let dt = event.dataTransfer;
        dt.setData("tag", "p");
        dt.setData("html", p1.innerHTML);
      });
      s1.addEventListener("dragstart", function (event) {
        let dt = event.dataTransfer;
        dt.setData("tag", "span");
        dt.setData("html", s1.innerHTML);
      });

      //目标对象事件
      div.ondragover = function (evet) {
        event.preventDefault(); //阻止浏览器默认行为
      };

      div.ondrop = function (e) {
        e.preventDefault();
        e.stopPropagation();
        //获取当前拖拽的源对象的信息，构建DOM元素，追加到div内部
        let dt = e.dataTransfer;
        let tag = dt.getData("tag");
        let html = dt.getData("html");
        let eee = document.createElement(tag);
        eee.innerHTML = html;
        div.appendChild(eee);
      };
    </script>
  </body>
</html>