实现拖拽的小demo 以及相关api介绍

BoZai_ya

已于 2022-07-01 17:52:45 修改

阅读量324

点赞数 1

分类专栏： html5+css3 文章标签： javascript 前端 html5

于 2022-07-01 16:21:37 首次发布

本文链接：https://blog.csdn.net/BoZai_ya/article/details/125554878

版权

html5+css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5提供了专门的拖拽API

存在兼容性

Opera浏览器不支持
不支持IE9

相关API

1. DataTransfer对象

拖拽对象用来传递的媒介，使用一般为Event.dataTransder
用于保存拖动并放下（drag and drop）过程中的数据，它可以保存一项或者多项的数据，这些数据可以是一种或者多种的数据类型。

2. draggable属性

注意：

就是在标签元素上要设置 draggable = true，否则拖拽效果是不会实现的。
链接和图片默认是可拖动的，不需要draggable属性

       <div draggable="true">实现拖拽</div>

在这里插入图片描述

3.作用在被拖拽元素上的事件（源元素）

ondragstart -->开始拖拽元素时触发
ondrag–>元素正在拖拽时触发
ondragend -->用户完成元素拖拽后触发

4. 作用在目标元素上，释放目标时触发的事件

ondragenter 进入其容器范围内触发
当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover-被拖动的对象在另一对象容器范围内拖动当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave -拖动的对象离开其容器范围内时触发
当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop-释放鼠标键时触发
在一个拖动过程中，释放鼠标键时触发此事件

5. Event.preventDefault()方法

阻止默认行为，想要ondrop事件被触发，在ondrapover中一定要执行preventDefault()
另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

<style>
      .demo {
        width: 200px;
        height: 50px;
        margin-bottom: 10px;
        background-color: aqua;
      }
      .wrapper {
        border: 1px solid #ccc;
        width: 300px;
        height: 400px;
      }
</style>
    
  <body>
    <div draggable="true" class="demo">被拖拽的目标元素</div>
    <div class="wrapper">我是目标对象容器</div>
  </body>

  <script>
    var demo = document.querySelector(".demo");
    var wrapper = document.querySelector(".wrapper");

    // 目标元素被拖动时触发的事件
    demo.ondragstart = function () {
      console.log("我开始被拖动了！");
    };
    // 目标元素被正在拖动时触发的事件
    demo.ondrag = function () {
      console.log("我正在被拖动！");
    };
    // 结束拖拽时触发的事件
    demo.ondragend = function () {
      console.log("我结束拖动了！");
    };

    wrapper.addEventListener("dragenter", () => {
      console.log("目标元素进入容器之后触发的事件");
    });
    wrapper.addEventListener("dragover", (event) => {
		event.preventDefault()
      console.log("目标元素在容器中移动时触发的事件");
    });
    wrapper.addEventListener("dragleave", () => {
      console.log("目标元素离开目标对象容器时触发的事件");
    });
	wrapper.addEventListener("drop", () => {
      console.log("鼠标释放时触发的事件！");
    });
  </script>

小demo
在这里插入图片描述

在这里插入图片描述
实现效果

具体代码实现

 <style>
      ul {
        border: 1px solid #ccc;
        padding: 5px;
        min-height: 150px;
        width: 200px;
      }
      ul li {
        list-style: none;
        background-color: aqua;
        padding: 5px;
        margin-bottom: 5px;
        width: 180px;
        cursor: pointer;
      }
  </style>
  </head>
  <body>
    <div>
      <h2>知识列表：</h2>
      <ul class="box1" id="box1Out">
        <li class="demo" draggable="true">1.HTML5+CSS3</li>
        <li class="demo" draggable="true">2.Javascript</li>
        <li class="demo" draggable="true">3.Vue</li>
        <li class="demo" draggable="true">4.React</li>
        <li class="demo" draggable="true">5.Element ui</li>
      </ul>
    </div>
    <div>
      <h2>你目前掌握的：</h2>
      <ul class="box2" id="box2Frame"></ul>
    </div>
  </body>

  <script>
    //  被拖拽的对象
    var demoList = document.querySelectorAll(".demo");
    // 确定当前正在拖拽哪一条数据
    var dragDom = null;
    for (let i = 0, len = demoList.length; i < len; i++) {
      demoList[i].ondragstart = function (e) {
        // console.log(this);
        // console.log(demoList[i]);
        dragDom = this;
      };
    }

    // 目标对象 容器
    var box2Frame = document.getElementById("box2Frame");
    box2Frame.ondragover = function (e) {
      e.preventDefault();
    };
    box2Frame.ondrop = function () {
      // 把捕获到的对象插入到目标对象中
      this.appendChild(dragDom);
    };
  </script>