H5拖放删除运用

aiguangyuan

已于 2022-07-20 16:59:01 修改

阅读量1k

点赞数

分类专栏： HTML 文章标签：前端开发 HTML

于 2019-06-26 07:10:05 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/93708616

版权

HTML 专栏收录该内容

35 篇文章 4 订阅

订阅专栏

利用H5新特性拖放API实现在拖放删除功能，以下是静态效果，实现的功能为拖放下面三架飞机中的某一架飞机图片至垃圾桶上方释放时，被拖放的飞机图片从三架飞机里面删除。

以下是代码实现

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>H5拖放删除运用</title>
    <style>
        body {
            text-align: center;
        }

        #box {
            border-top: 1px solid #888;
            padding: 1em;
        }
    </style>
</head>

<body>
    <h1>H5拖放删除运用</h1>
    <!-- 垃圾桶图片，其他图片拖放至此处删除 -->
    <img id="trash" src="images/trash.png">
    <div id="box">
        <!-- 即将要被删除的图片 -->
        <img src="images/p3.png" id="p3">
        <img src="images/p4.png" id="p4">
        <img src="images/p5.png" id="p5">
    </div>
    <script>
        // 当前被拖动的图的编号
        var planeId = null;
        // 拖动事件的源对象可能触发的事件
        var list = document.querySelectorAll('#box img');
        for (var i = 0; i < list.length; i++) {
            var plane = list[i];
            plane.ondragstart = function (e) {
                //刚拖动时记录拖动对象的ID
                planeId = this.id;
            };
            plane.ondrag = function (e) { };
            plane.ondragend = function (e) { }
        }

        // 拖动事件的目标对象可能触发的事件
        trash.ondragenter = function (e) { };
        trash.ondragover = function (e) {
            e.preventDefault();
        };
        trash.ondragleave = function (e) { };
        trash.ondrop = function (e) {
            console.log(planeId);
            // 根据元素的ID查找IMG元素，在#box进行删除
            var img = document.getElementById(planeId);
            box.removeChild(img);
        }
    </script>
</body>

</html>