DOM - BOM - 拖拽 - 拖拽文件到页面

最新推荐文章于 2023-01-30 22:01:36 发布

Jerry-0425

最新推荐文章于 2023-01-30 22:01:36 发布

阅读量175

点赞数

分类专栏： Wed_APIs

本文链接：https://blog.csdn.net/weixin_52088589/article/details/112307963

版权

HTML5 拖放鼠标事件坐标显示图片拖拽

关键词由CSDN通过智能技术生成

Wed_APIs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

1 , 拖拽

在这里插入图片描述

<!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;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //鼠标按下,鼠标移动,鼠标抬起
        let div = document.querySelector('div') 
        //添加事件
        div.addEventListener('mousedown', function (event) {
             //按下的时候记录相对于元素的left和top
            let x1 = event.offsetX
            let y1 = event.offsetY
            //产生事件


            let fu = function(event) {
                //获取x和Y的位置
                let  x = event.clientX - x1
                let  y = event.clientY - y1

                //判断 
                if (x < 20) {
                    x = 0
                } else if (x > document.documentElement.clientWidth - div.offsetWidth) {
                    x = document.documentElement.clientWidth - div.offsetWidth
                }

                if (y < 20) {
                    y = 0
                } else if (y > document.documentElement.clientHeight - div.offsetHeight) {
                    y = document.documentElement.clientHeight - div.offsetHeight
                }

                div.style.left = x + 'px'
                div.style.top = y + 'px'
            }
            document.addEventListener('mousemove', fu)

            document.addEventListener('mouseup', function () {
            //移除 mousemove 事件
            document.removeEventListener('mousemove', fu)
        })
        })
        
    </script>
</body>
</html>

2 , 鼠标移动显示坐标

在这里插入图片描述

<!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;
        }
        div {
            width: 100px;   
            height: 100px;
            background-color: red;
            /* margin: 1000px; */
            color: #fff;
        }
    </style>
</head>
<body>
    <div>坐标X,Y</div>

    <script>
        //移动的时候显示坐标值
        let div = document.querySelector('div') 

        div.addEventListener('mousemove', function (event) {
            //获取真实的x 和 y
            let x = event.clientX
            let y = event.clientY
            //设置x和Y 的真实坐标
            div.innerHTML = `坐标${x},${y}`
        })
        </script>

</body>
</html>

3 , 把外部图片拖拽到元素显示

在这里插入图片描述

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>


    <script>
        //如果元素被拖拽通过相关的事件可以监听

        //dragover : 监听元素被拖拽到当前盒子
        //获取元素
        let div = document.querySelector('div')

        // dragover 事件 : 监听元素是否被拖拽进来  监听某个元素是否被拖拽到当前盒子
        div.addEventListener('dragover', function (event) {
            // console.log(123);
            //每次添加之前把盒子里的内容清空
            div.innerHTML = ''

            //阻止默认行为发生
            event.preventDefault()
        })

        //drop 事件, 监听某个元素被拖拽到这个盒子上时 , 鼠标松开
        div.addEventListener('drop', function (event) {
            console.log('元素被放开了');
            //找到这个元素的 base64编码
            // 重点 : event.dataTransfer 包含了被拖拽的文件信心
            // console.log(event.dataTransfer.files[0])
            //实例化
            let reader = new FileReader()
            //把图片 ( 文件 ) 读取成 base64 编码格式
            reader.readAsDataURL(event.dataTransfer.files[0])
            //读取完毕之后显示图片
            reader.addEventListener('load', function() {
                // console.log(this.result);
                //创建元素
                let img = document.createElement('img')
                //添加src  //result 获取编码的的结果就是 result 的属性值
                img.src = this.result
                //放到盒子里
                div.appendChild(img)
            })
            event.preventDefault()
        })
    </script>
</body>
</html>

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>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        let div = document.querySelector('div')

        //鼠标移动的时候,设置img的left和top
        //只需要把img 的left设置巍鼠标的x, y 是 top
        document.addEventListener('mousemove', function (event) {
            //获取鼠标的x和Y
            let  x = event.clientX
            let y = event.clientY

            //设置给img即可
            div.style.left = x - div.offsetWidth / 2 + 'px'
            div.style.top = y - div.offsetHeight / 2 + 'px'
        })
    </script>
</body>
</html>

Jerry-0425

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM - BOM - 拖拽 - 拖拽文件到页面

文章目录1 , 拖拽2 , 鼠标移动显示坐标3 , 把外部图片拖拽到元素显示4 , 元素自动跟随鼠标移动1 , 拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume
复制链接

扫一扫