• H5中的拖放（Drag 和 Drop）

    拖放（Drag 和 Drop）

    它指的是您抓取某物并拖入不同的位置。 拖放是 HTML5 标准的组成部分：任何元素都是可拖放的

    1.将元素设置成可拖放 (img 和 a 元素默认即是可拖放的)

    例如：

    2.下面就是拖放相关的事件的介绍

    源元素:
    (1)ondrag: 元素被拖动时执行的事件，会执行多次。
    (2)ondragstart： 元素被开始拖动的时候执行的事件，只会执行一次。
    (3)ondragend： 在拖动操作结束时执行的事件，只会执行一次。
    目标元素:
    (4)ondragenter 当元素被拖动到目标区域时执行的事件。
    (5)ondragleave 当元素离开目标区域时执行的事件。
    (6)ondragover 当元素在目标区域上停留时执行的事件。
    (7)ondrop: 当元素在目标区域上被释放时执行的事件，默认情况下该事件是不会被触发的（在默认情况下，无法将元素放置到其他元素中，若需设置允许放置，就必须对元素的默认方式进行处理，即需要在ondragover事件中阻止默认事件even.preventDefault(), 才能使ondrop事件执行）

    3.关于对拖动元素的存储，可以借助于

    (1)setData(format, data)方法，该方法设置被拖动元素的数据类型和值，
    (2)对应的获取时getData(format）方法(数据类型例如text,text/html, text/plain，url等)
    (3)clearData（有一个可选的参数即拖动操作的数据类型）该方法用于删除给定类型的拖动操作的数据，如果给定的数据类型不存在，则不执行任何操作，若不给定数据类型，则删除所有。
    elem.ondragstart = function (e) {
  e.dataTransfer.setData(拖动元素的数据类型,e.target.id)
}
elem.ondragover = function () {
    return false // 阻止默认行为
}
elem.ondrop = function (e) {
    let id = e.dataTransfer.getData(拖动元素的类型)
    e.target.appendChild(document.getElementById(id))
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    4.实例如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin: 30px;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: inline-block;
            position: relative;
            box-sizing: border-box;
            overflow: auto;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box box1">
            <img src="./img/1.jpeg"  id="img1" alt="">        
            <img src="./img/2.jpeg" id="img2"  alt="">        
            <img src="./img/3.jpeg" id="img3"  alt="">        
            <img src="./img/4.jpeg" id="img4"  alt="">        
            <img src="./img/5.jpeg" id="img5"  alt="">        
            <img src="./img/6.jpeg" id="img6"  alt="">        
            <img src="./img/7.jpeg" id="img7"  alt="">
        </div>
        <div class="box box2"></div>
        <div class="box box3"></div>
    </div>
    <script>
        /* 
        利用事件委托处理多个可拖动的元素
        */
        function $(name) {
            return document.querySelector(name)
        }
        let mainBox = $(".main")
        // 1.将元素设置成可拖放的 
        mainBox.ondragstart = function (e) { 
            // 获取拖动元素的信息 利用setData方法
            e.dataTransfer.setData("Text", e.target.id)
        }
        mainBox.ondragover = function (e) {
            e.preventDefault()
        }
        // 想要触发ondrop事件，需要在ondragover里面阻止默认行为
        mainBox.ondrop = function (e) {
            let elem = e.dataTransfer.getData('Text')
            e.target.appendChild(document.getElementById(elem))
        }
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
  • 相关阅读:
    Matlab：转换日期向量返回意外输出
    【017】基于vue.js的网易云web端(实现播放、登录)（Node接口实现）
    lnmp 论坛框架搭建
    [RK3568 Android11]AudioTrack音频流数据传输
    MVSNet CVPR-2018 学习总结笔记 译文 深度学习三维重建
    进程间通信之共享内存
    MyBatis批量插入的五种方式
    简易开发一个app
    昇腾CANN 7.0 黑科技：DVPP硬件加速训练数据预处理，友好解决Host CPU预处理瓶颈
    Linux aarch64交叉编译之 cryptopp加密库
  • 原文地址：https://blog.csdn.net/Kratial/article/details/126118939