【H5】拖拽3事件( onmousedown ,onmousemove ,onmouseup )

最新推荐文章于 2024-02-22 16:53:56 发布

舜岳

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量3.1k

点赞数 3

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_41614928/article/details/90339475

版权

HTML5 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

H5 拖拽案例：

用到3个拖拽事件：

onmousedown 鼠标按下触发事件
onmousemove 鼠标按下时持续触发事件
onmouseup 鼠标抬起触发事件

效果图如下:

在这里插入图片描述

以下是实现代码，代码上有详细说明哦！

<!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>拖拽</title>
    <style>
        *{margin:0;padding:0;}
        #box{
            position:absolute;
            left:0;
            top:0;
            width:200px;
            height:200px;
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    
    <script>
        //onmousedown 鼠标按下触发事件
        //onmousemove 鼠标按下时持续触发事件
        //onmouseup   鼠标抬起触发事件
        let box = document.getElementById('box');
        box.onmousedown = function(e){
            //获取鼠标点击位置距离被点击模块的left与top距离
            //e是点击事件的e , this是box元素的this
            let x = e.clientX - this.offsetLeft
            let y = e.clientY - this.offsetTop
            document.onmousemove = function(e){
                //拖拽时距离文档left与top距离 减去 距离拖拽物的left与top距离 = 拖拽物的位置
                box.style.cssText = `left:${ e.clientX - x }px;top:${e.clientY - y}px`;
            }
            document.onmouseup = function(){
                //清除事件
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>

复制，粘贴到你的html文件内即可实现同样的效果哦！

对于文档距离获取的补充：

舜岳

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【H5】拖拽3事件( onmousedown ,onmousemove ,onmouseup )

H5 拖拽案例：用到3个拖拽事件：onmousedown 鼠标按下触发事件onmousemove 鼠标按下时持续触发事件onmouseup 鼠标抬起触发事件效果图如下:以下是实现代码，代码上有详细说明哦！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...
复制链接

扫一扫