H5的拖拽事件

最新推荐文章于 2024-02-22 16:53:56 发布

别问，问就是菜鸡

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量787

点赞数 1

分类专栏： js 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_48637533/article/details/126630793

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

拖拽事件是H5新增的特性

假如我们有如下布局
在这里插入图片描述
如何实现将下面的one two three 三个盒子拖拽放到大方框内呢？

拖拽元素与放置元素

以上案例中大的方框就是放置元素，我们要把小盒子拖拽放到里面，小盒子就是拖拽元素，进行拖拽操作

拖拽事件与放置事件

要清楚的一点就是拖拽事件是给拖拽元素设置的，放置事件是给放置元素设置的

拖拽事件

dragstart 开始拖动

elemnt.ondragStart = function(){}

drag 正在拖动

elemnt.ondrag  = function(){}

dragend 拖动结束

elemnt.ondragend  = function(){}

放置事件

放置事件是给放置元素用的，
注意当前的放置元素默认是不让元素放置的，要将放置元素设置为可放置，event.preventDefault()

dragenter 进入放置元素

elemnt.ondragenter = function(){}

drageover 正在放置元素内移动

elemnt.ondrageover  = function(){}

drop 将拖动元素放在放置元素内

elemnt.ondrop = funtion(){}

实现步骤

1.允许拖拽设置元素属性 draggable=“true” 使元素允许拖拽了，注意，默认元素是不允许拖拽的，需要手动设置
2.给放置元素设置ondragover事件，在该事件中设置放置元素阻止默认行为event.preventDefault(); 即设置成可放置的元素
3.给拖拽元素设置拖拽事件，（注意，原生js是不能给同类名的元素同时设置事件，需要转换成数组之后，再使用遍历来给每个同类名的元素进行事件绑定）
4.在开始拖拽 ondragstart 事件中获取该拖拽元素的id 进行数据传输 event.dataTransfer.setData(‘id’, id)，为后续的给放置元素追加子元素做准备
5.给放置元素设置 ondrop 事件，获取拖拽元素的id event.dataTransfer.getData(‘id’) 使用 appendChild 方式实现增加子元素，实现放置效果
6.注意当实现拖放回去的时候，需要在放置元素阻止冒泡事件 event.stopPropagation(),

附上源码

<!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">
  <script src="../jQuery/jquery-3.3.1.min.js"></script>
  <title>Document</title>
  <style>
    #parent {
      width: 100%;
      height: 400px;
      border: 1px solid rebeccapurple;

    }

    #child1,
    #child2,
    #child3 {
      width: 80px;
      height: 100px;
      background-color: bisque;
      float: left;
      margin-left: 10px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div id="parent"></div>
  <div id="child1" draggable="true" class="child">one</div>
  <div id="child2" draggable="true" class="child">two</div>
  <div id="child3" draggable="true" class="child">three</div>
  <script>
    window.onload = function () {
      // 允许放置
      var parent = document.getElementById('parent')
      var child = document.getElementsByClassName('child')
      // 由于是原生js，直接使用类名是无法绑定事件的，将querySelectorAll这个类数组转变成数组
      child = Array.from(child)

      // 正在放置元素内移动触发的事件
      parent.ondragover = function (event) {
        // 把放置元素设置成可以放置，即阻止其默认行为
        event.preventDefault();
      }
      parent.ondrop = function (event) {
        var id = event.dataTransfer.getData('id')
        var childdom = document.querySelector("#" + id)
        this.appendChild(childdom)
        // 阻止冒泡事件，为拖放回去做准备
        event.stopPropagation();
      }
      child.forEach(function (item) {
        // 开始拖拽事件
        item.ondragstart = function () {
          // 获取当前开始拖动child的id
          // 数据传输 
          var id = this.id
          event.dataTransfer.setData('id', id)
        }
        // 正在拖动事件
        item.ondrag = function () {

        }
        // 拖拽结束事件
        item.ondragend = function (event) {

        }
      })

      var body = document.querySelector('body');
      body.ondragover = function (event) {
        // 阻止默认事件，
        event.preventDefault()
      }
      body.ondrop = function () {
        var id = event.dataTransfer.getData('id')
        var childdom = document.querySelector("#" + id);
        this.appendChild(childdom)
      }


    }
  </script>
</body>

</html>