随笔记：HTML5之拖放

最新推荐文章于 2024-02-22 17:16:13 发布

蜗牛前端攻城狮

最新推荐文章于 2024-02-22 17:16:13 发布

阅读量108

点赞数

分类专栏：随笔记 HTML5 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52320207/article/details/123234360

版权

随笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

随笔记：HTML5之拖放

学习一下HTML5 拖放知识 — 2022年3月2号

drag 释义：拖拽
drop 释义：投丢
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。
拖放过程中会触发的事件
1. 在拖动目标上触发事件(源元素):
  - ondragstart - 用户开始拖动元素时触发
  - ondrag - 元素正在拖动时触发
  - ondragend- 用户完成元素拖动后触发
2. 释放目标时触发的事件:
  - ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  - ondragover- 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  - ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  - ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

code example

//样式
<style>
        #div1 {
            margin-top: 20px;
            border: 1px solid black;
            width: 200px;
            height: 100px;
        }

        #div2 {
            border: 1px solid red;
            width: 200px;
            height: 100px;
        }
 </style>
 
 //结构
 <body>
    <!-- 为了把一个元素设置为可拖放，请把 draggable 属性设置为 true： -->
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img id="img" draggable="true" src="./d1160924ab18972bb8370c8bd4bb72809f510ae4.jpeg" width="100" height="100"
            ondragstart="drag(event)">
    </div>
    <div id="div1" ondragover="allowDrop(event)" ondrop="drop(event)">

    </div>
    <script>
        /* 
            拖放事件
         */
        // 开始拖放 - 拖放的内容  ondragstart和setData
        function drag(ev) {
            console.log(ev, ev.target.id, '点击并移动鼠标 - 拖放开始')
            // dataTransfer.setData() 方法设置被拖动数据的数据类型和值：
            ev.dataTransfer.setData("text", ev.target.id);
        }
        // 结束拖放 - 拖到何处 ondragover
        function allowDrop(ev) {
            ev.preventDefault();
        }
        // 进行放置 - ondrop
        function drop(ev) {
            console.log('鼠标放开，发生 drop 事件');//放置到能接收移动的位置
            ev.preventDefault();
            // 通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</body>

实现思路
1. 把元素设置为可缩放，给要拖放的元素设置属性：draggable=“true”
2. 拖放的内容：规定当元素被拖动时发生的事情
  1. ondragstart事件：规定拖动什么数据，方法传参为event(事件对象)
  2. event.dataTransfer.setData()方法设置被拖动数据的数据类型和值
    1. 上例中可拖拽的元素为ev.target.id就是 id(‘img’)
3. 拖到何处 - ondragover
  1. 该事件规定被拖动的数据能够放置何处。
  2. event.preventDefault()的作用：默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。
4. 进行放置 - ondrop
  1. 当放开被拖数据时，会发生drop事件。
  2. event.dataTransfer.getData()方法获得被拖动的数据，该方法将返回在 setData() 方法中设置为相同类型的任何数据