HTML5中新增的拖拽事件

拖拽事件

ondrag 拖拽事件
ondragstart 拖拽开始
ondragend 拖拽结束
ondragenter 拖拽进入
ondragover 拖拽悬浮 // 阻止它的默认事件 return false 或者 e.preventDefault();
ondragleave 拖拽离开

ondrop 拖拽丢弃，其他图像拖拽的时候丢弃到当前元素上。

注意事项，ondragover的默认行为会阻止ondrop事件的触发，所以想触发ondrop事件必须阻止ondragover的默认事件

拖拽时存储数据：e.dataTransfer.setData(key, value);
拖拽时读取数据: e.dataTransfer.getData(key);

拖拽实例：
　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img class="img"  src="imgs/1.png" alt="">
    <img class="img" src="imgs/2.png" alt="">
    <img class="img" src="imgs/3.png" alt="">
    <img class="img" src="imgs/thanks.png" alt="">
    <img id="trash" src="imgs/trash.png" alt="">
    <script>
    // 设置信号量
    var idx = null;
    // 获得元素对象
    var trash = document.querySelector('#trash');
    var imgs = document.querySelectorAll('.img');

    // 绑定事件
    imgs.forEach(function(value, index) {
        value.ondragstart = function(e) {
            idx = index;
            console.log(idx);
            e.dataTransfer.setData('idx', index);
        }
    });

    // 绑定拖拽悬浮事件
    trash.ondragover = function() {
        // 阻止默认行为
        return false;
    };
    // 绑定拖拽丢弃事件
    trash.ondrop = function(e) {
        console.log(e.dataTransfer.getData('idx'));
        // 从dom中删除对象的元素
        document.body.removeChild(imgs[idx]);
    };


    </script>
</body>
</html>

第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./images/1.png" alt="" id="drop1">
    <img src="./images/2.png" alt="" id="drop2">
    <img src="./images/3.png" alt="" id="drop3">
    <img src="./images/thanks.png" alt="" id="drop4">
    <img src="./images/trash.png" alt="" id="trash">
    <script>
        //将页面中的图片拖到垃圾桶中丢弃
        var drops = [].slice.apply(document.getElementsByTagName("img"));
        drops.pop();
        var trash = document.getElementById("trash");

        // 遍历
        // drops.forEach(function(value,index,array){
        //     // console.log(value,index,array)
        // });
        drops.forEach(function(value){
            value.ondragstart = function(e){
                e.dataTransfer.setData('id',this.id);
            }
        });
        

        //垃圾桶丢弃事件
        trash.ondragover = function(e){
            e.preventDefault();
        }

        trash.ondrop = function(e){
            var id = e.dataTransfer.getData("id");
            console.log("drop...",id, e.dataTransfer);

            if(id){
                var dropELem = document.getElementById(id);
                dropELem.remove();
            }
        }
    </script>
</body>
</html>