Web-js：实现拖动对话框（模态框）

最新推荐文章于 2022-11-16 21:14:54 发布

阿尔兹

最新推荐文章于 2022-11-16 21:14:54 发布

阅读量392

点赞数 1

分类专栏： Web 文章标签： web 鼠标跟随拖拽模态框 Javascript

本文链接：https://blog.csdn.net/alzzw/article/details/119540123

版权

Web 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

实现点击按住蓝色区域移动鼠标实现拖动整个区域，松开时固定在当前位置：

<!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>拖动模态框</title>
    <style>
        div.modal {
            background-color: hotpink;
            width: 300px;
            height: 300px;
            position: relative;
        }
        div.header{
            height: 50px;
            width: 100%;
            background-color: lightblue;
        }
    </style>

</head>
<body>
    <div class="modal">
        <div class="header"></div>
    </div>

    <script>
        var eleHeader = document.querySelector('.header');
        var eleModal = document.querySelector('.modal');
        //鼠标按下事件
        eleHeader.addEventListener('mousedown',function(e){
            //方法一
            //offsetLeft/Top可以得到元素的偏移位置返回的不带单位的数值
            //以带有定位的父亲为准,如果没有父亲或者父亲没有定位则以body为准
            var fixX = e.pageX - eleModal.offsetLeft;
            var fixY = e.pageY - eleModal.offsetTop;
            //方法二
            // offsetX/Y 规定了事件对象与目标节点的内填充边（padding edge）在 X/Y 轴方向上的偏移量。
            //新属性，老版本浏览器不兼容
            // var fixX = e.offsetX;
            // var fixY = e.offsetY;
            
            //鼠标移动事件
            document.addEventListener('mousemove', move)

            function move(e){
                //  clientX/Y相对于视口
                //  pageX/Y相对于整个页面
                //  screenX/Y相对于电脑屏幕
                eleModal.style.left = e.pageX - fixX +'px';
                eleModal.style.top = e.pageY - fixY +'px';
            }
            //鼠标弹起事件
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move)
            })
        })
    </script>
</body>
</html>

阿尔兹

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web-js：实现拖动对话框（模态框）

实现点击按住蓝色区域移动鼠标实现拖动整个区域，松开时固定在当前位置：<!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, i.
复制链接

扫一扫