JS:模态框拖拽

最新推荐文章于 2023-05-12 14:42:08 发布

Cathy _Mmm

最新推荐文章于 2023-05-12 14:42:08 发布

阅读量415

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46535360/article/details/108923107

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

要实现模态框的拖拽
1.首先鼠标的拖拽时先按下鼠标且移动的时候才能实现拖拽
2.获取鼠标按下时的下的坐标减去距离边框的距离为x，y
3.获取鼠标移动时的x1，y1坐标
4.用x1-x，y1-y可以知道模态框left，top

在这里插入图片描述

代码如下：

<body>
    <div class="login">
        <div class="model">
            <p>登录会员</p>
            <span>用户名：</span><input type="text" ><br>
            <span>登陆密码：</span><input type="password" ><br>
            <button class="vip" style="margin:0 auto">登陆会员</button>
            <div class="del">x</div>
        </div>
    </div>
    <div class="login-head">点击，登录会员。。。</div>

    <script>
        var lo_h = document.querySelector('.login-head');
        var del = document.querySelector('.del');
        var model=document.querySelector('.model');
        var login=document.querySelector('.login');
        lo_h.onclick = function () {
            this.style.display = 'none';
            login.style.display = 'block';
            model.style.display = 'block';

        }
        
        del.onclick= function(){
            model.style.display='none';
        }

        model.addEventListener('mousedown',function(e){
            var x=e.pageX - model.offsetLeft;
            var y=e.pageY - model.offsetTop;
            var move=function(e){
                model.style.left=e.pageX-x+'px';
                model.style.top=e.pageY-y+'px';
            }
            document.addEventListener('mousemove',move);
            document.addEventListener('mouseup',function(e){
                document.removeEventListener('mousemove',move)
            });
        });
    </script>
</body>

Cathy _Mmm

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS:模态框拖拽

要实现模态框的拖拽1.首先鼠标的拖拽时先按下鼠标且移动的时候才能实现拖拽2.获取鼠标按下时的下的坐标减去距离边框的距离为x，y3.获取鼠标移动时的x1，y1坐标4.用x1-x，y1-y可以知道模态框left，top代码如下：<body> <div class="login"> <div class="model"> <p>登录会员</p> <span&gt
复制链接

扫一扫