前端拖拽事件

最新推荐文章于 2024-06-01 13:39:13 发布

xinyao_web

最新推荐文章于 2024-06-01 13:39:13 发布

阅读量364

点赞数 5

文章标签：前端 js javascript

本文链接：https://blog.csdn.net/akhxl/article/details/136073768

版权

本文详细介绍了HTML5中的拖拽功能，包括拖动元素的基本原理，涉及的事件（如dragstart,drag,dragend等），以及如何在源和目标元素间传输数据。通过实例展示了如何实现拖动一个元素到另一个元素的操作。

摘要由CSDN通过智能技术生成

概念

拖拽是页面中的元素从初始位置被拖动到新的位置的用户行为，如拖拽页面中的指定元素到另一个元素中。拖拽是HTML5中提供的新的交互方式，默认在超链接和图片上存在。可通过设置draggable属性为true使元素可以拖拽。

事件

初始位置元素的事件有三个，开始拖动dragstart，正在拖动drag，拖动结束dragend。

新位置元素的事件有四个，元素进入dragenter，元素离开dragleave，元素正在上方dragover，元素被放下drop。其中元素正在上方事件，需要阻止事件的默认操作，排斥拖拽元素被放下，e.preventDefault()。

数据传输

在源对象和目标对象的事件处理函数中，可以使用dataTransfer对象进行数据传输。例如通过event.dataTransfer.setData(format,data)设置数据，通过event.dataTransfer.getData(format)获取数据。

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖拽操作drag</title>
    <style>
      #box {
        width: 300px;
        height: 200px;
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <p class="p" draggable="true">Hello!</p>
    <div id="box"></div>
    <script>
      // 拖动p标签到box上方，松手之后移动到盒子里
      let p = document.querySelector("p");
      p.addEventListener("dragstart", function () {
        console.log("开始拖动");
      });
      p.addEventListener("drag", function () {
        console.log("正在拖动");
      });
      p.addEventListener("dragend", function () {
        console.log("拖动结束");
      });

      let box = document.getElementById("box");
      box.addEventListener("dragenter", () => {
        console.log("有元素进入");
      });
      box.addEventListener("dragleave", () => {
        console.log("元素离开");
      });

      box.addEventListener("dragover", (e) => {
        console.log("元素正在上方");
        e.preventDefault(); // 阻止默认拖拽元素被放下
      });
      box.addEventListener("drop", () => {
        console.log("元素被放下");
        box.appendChild(p);
      });
    </script>
  </body>
</html>