当前位置：网站首页>H5中的拖放（Drag 和 Drop）

H5中的拖放（Drag 和 Drop）

2022-08-02 14:23:00 【Kratial】

拖放（Drag 和 Drop）

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

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

例如：<div draggable="true"></div>

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))
}

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>