JS实现拖动模态框

目录

核心思路讲解：

HTML和CSS代码： 

 JavaScript代码：

---

核心思路讲解：

h3.addEventListener('mousedown',function(e) { 
       h3.style.cursor = 'move';
       var x = e.pageX - wrap.offsetLeft;
       var y = e.pageY - wrap.offsetTop;

 因为是此时点击触发，所以获取到此时鼠标在框内的坐标是固定不变的。

 document.addEventListener('mousemove',move); //
        function move(e) {
            wrap.style.left = e.pageX - x + 'px';
            wrap.style.top = e.pageY - y + 'px';
        }

鼠标移动事件要添加到document，因为实在整个页面移动。移动时动态获取鼠标的坐标，将此鼠标的坐标

HTML和CSS代码： 

    <style>
        *{
            margin: 0;padding: 0;
        }
        h1{
            width: 300px;
            text-align: center;
            background-color: bisque;
            position: absolute;
            z-index: 1;
            left: 600px;
        }
        .wrap{
            width: 450px;
            height: 240px;
            border: 1px solid #ccc;
            box-shadow: 0 0 15px #aaa;
            position:absolute;
            left: 500px;
            top: 200px;
            display: none;
            background-color: white;
            z-index: 3;
        }
        label{
            display: inline-block;
            width: 100px;
            height: 50px;
            text-align: right;
            line-height: 50px;
        }
        .wrap>div>input{
            width: 260px;
            height: 35px;
            outline: none;
            border: 1px solid #ccc;
            padding-left: 12px;
        }
        .wrap>div{
            margin-bottom: 5px;
        }
        .wrap>button{
            width: 40px;height: 40px;
            border-radius: 50%;
            position: absolute;
            right: -20px; top: -20px;
            border: 1px solid #ccc;
            background-color: white;
            font-size: 16px;
        }
        h3{
            width: 100%;
            padding: 15px 0;
            text-align: center;
        }
        .wrap>input{
            display: block;
            width: 200px;
            text-align: center;
            height: 35px; line-height: 35px;
            background-color: white;
            margin: 25px auto;
            border: 1px solid #ccc;
            font-weight: bold;
        }
        .wrap>div>input.hover{
            border: 1px solid rgb(33, 155, 254);
        }
        .bg{
            width: 100%;
            height: 100%;
            position: absolute;
            display: none;
            background-color: rgba(48, 47, 47,0.5);
            z-index: 2;
        }
    </style>
    <h1>点击弹出登录框</h1>
    <div class="wrap">
        <button>关闭</button>
        <h3>登陆会员</h3>
        <div>
            <label for="uname">用户名：</label>
            <input type="text" id="uname" class="ipt" placeholder="请输入用户名">
        </div>
        <div>
            <label for="pwd">登录密码：</label>
            <input type="password" id="pwd" class="ipt" placeholder="请输入登录密码">
        </div>
        <input type="submit" value="登陆会员">
    </div>
    <div class="bg"></div>

 JavaScript代码：

 var h1 = document.querySelector('h1');
 var wrap = document.querySelector('.wrap');
 var bg = document.querySelector('.bg');
    //点击弹出登录框
 h1.onclick = function() {
       wrap.style.display = 'block';
       bg.style.display = 'block';
   }
    //禁止登录框的选中文字
 wrap.addEventListener('selectstart',function(e){
       e.preventDefault();
   })
 var btn = wrap.children[0];
    //设置关闭按钮点击事件，关闭登录框
 btn.addEventListener('click',function() {
       wrap.style.display = 'none';
       bg.style.display = 'none';
   })
 var ipt = wrap.querySelectorAll('.ipt');
    //给表单添加获得焦点和失去焦点事件，改变边框颜色
 for(var i = 0; i < ipt.length; i++){
       ipt[i].onfocus = function() {
           this.className = 'ipt hover';
   }
       ipt[i].onblur = function() {
           this.className = 'ipt';
       }
   }
  var h3 = wrap.querySelector('h3');
     // 鼠标按下，获取此时鼠标在登录框内坐标
  h3.addEventListener('mousedown',function(e) { 
       h3.style.cursor = 'move';
       var x = e.pageX - wrap.offsetLeft;
       var y = e.pageY - wrap.offsetTop;
            
    // 鼠标移动，获取鼠标在页面移动时坐标，减去之前获取到的鼠标在框内坐标即登录框移动坐标
        document.addEventListener('mousemove',move); //
        function move(e) {
            wrap.style.left = e.pageX - x + 'px';
            wrap.style.top = e.pageY - y + 'px';
        }

       // 鼠标松开，清除鼠标移动事件
        document.addEventListener('mouseup',function() {
            document.removeEventListener('mousemove',move);
            h3.style.cursor = '';
        });
    })