HTML5 新特性之七---拖放API

最新推荐文章于 2022-05-22 00:00:44 发布

zh__quan

最新推荐文章于 2022-05-22 00:00:44 发布

阅读量201

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/zh__quan/article/details/97499478

版权

HTML+CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Drag&Drop拖动和释放

HTML为拖放行为提供了7个事件

拖动源对象:(会动)会触发事件(3)

dragstart 拖动开始

drag 拖动中

dragend 拖动结束

拖动的目标对象:(不动)=会触发事件(4)

dragenter 拖动着进入

dragover 拖动着悬停上方

dragleave 拖动着离开

drop 在上方释放

整体过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>拖动练习</h1>
    <img src="img/p0.png" id="trash" alt="">
    <hr>
    <div id="box">
        <img src="img/p3.png" id="p3" alt="">
        <img src="img/p4.png" id="p4" alt="">
        <img src="img/p5.png" id="p5" alt="">
    </div>
    <script type="text/javascript">
        //1.创建全局变量保存飞机id值
        var planeId = null;
        //2.获取所有拖动源对象，为每个源对象绑定三个事件
        var list = document.querySelectorAll("#box img");
        for (var i=0;i<list.length;i++){
            var plane = list[i];
            plane.ondragstart=function () {
                planeId = this.id;
            }
            plane.ondrag=function () {}
            plane.ondragend=function () {}
        }
        //3.获取目标对象为其绑定四个事件
        //4.在目标对象释放事件中获取飞机id值并且从DOM删除
        trash.ondragenter=function () {}
        trash.ondragover = function (e) {
            e.preventDefault()
        }
        trash.ondragleave = function () {}
        trash.ondrop = function () {
            var img = document.getElementById(planeId);
            box.removeChild(img);
        }
    </script>
</body>
</html>