图片简单拖拽入垃圾桶的三种方法

最新推荐文章于 2024-07-15 17:15:41 发布

AC_QI

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量308

点赞数

分类专栏：小工具文章标签： javascript html5

本文链接：https://blog.csdn.net/m0_60297110/article/details/120421802

版权

小工具专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img id="a1" src="./图片/1.jpg" alt="">
    <img id="a2" src="./图片/2.jpg" alt="">
    <img id="a3" src="./图片/4.jpg" alt="">
    <img id="a4" src="./图片/6.5.jpg" alt="">
    <img id="a5" src="./图片/10.5.jpg" alt="">
    <img id="a6" src="./图片/10.jpg" alt="">
    <img id="a7" src="./图片/12.trash.jpg" alt="">

    <script>
        //创建图片：document.creatElement('img')            // new Image()        
        //获取图片：document.getElementByTagName('img')     // document.images
        //让丢弃事件生效

        //获取图片
        //将类数组对象转成数组：使用数组方法:slice（数组截取）// Array.prototype.slice. //[].slice
        var imgs = Array.prototype.slice.call(document.images);

        //获取垃圾桶图片
        var trash = imgs.pop();
        // console.log(imgs, trash);
        // 铲除最后一张图片
        // //方法一：创建全局变量var dom ；
        // //丢弃到垃圾桶
        // var dom;
        // imgs[5].ondragstart = function (e) {
        //     dom = e.target;
        // }
        // trash.ondrop = function (e) {
        //     //删除元素
        //     document.body.removeChild(dom)
        // }

        // 方法二：存储到函数中
        function bigTrash(e) {
            for (var dom = 0; dom < imgs.length; dom++) {
                imgs[dom].ondragstart = function (e) {
                    dom = e.target;
                }
            }
            //丢弃到垃圾桶
            trash.ondrop = function (e) {
                //删除元素
                document.body.removeChild(dom)
            }
            //让丢弃事件生效
            trash.ondragover = function (e) {
                e.preventDefault()
            }
        }
        bigTrash();

       

    </script>
</body>

</html>

   //方法三(给最后一张图片设置)：存储到对象 dataTransfer会在拖拽事件中共享
        imgs[5].ondragstart = function (e) {
            // console.log(e);
            //通过dataTransfer存储数据
            e.dataTransfer.setData('dom', e.target);
            //存储元素的话会转成字符串，所以可以存储id
            e.dataTransfer.setData('dom', e.target.id)
        }
        //方法三：给所有图片设置事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].ondragstart = function (e) {//绑定事件
                //存储元素id
                e.dataTransfer.setData('dom', e.target.id)
            }
        }
        //丢弃到垃圾桶
        trash.ondrop = function (e) {
            // console.log(e.dataTransfer.getData('dom'));
            //通过id获取元素
            var dom = document.getElementById(e.dataTransfer.getData('dom'));
            //删除元素
            document.body.removeChild(dom)
        }
        trash.ondragover = function (e) {
            e.preventDefault()
        }

AC_QI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片简单拖拽入垃圾桶的三种方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫