js实现模态框拖拽_javascript技巧_

     登录我的账号     
         
账号登录
         
             用户名：                          
         
             登录密码：                                   
         登录账号         关闭     
     

var eyeState = document.querySelector('#eye-state'); var pswInput = document.querySelector('#psw'); var login = document.querySelector('.login'); var loginBg = document.querySelector('#bg'); var loginForm = document.querySelector('form'); var closeBtn = document.querySelector('.close-btn');          var eyeFlag = 0;     eyeState.onclick = setEye;     login.onclick = goLogin;     closeBtn.onclick = leaveLogin;     loginForm.children[0].addEventListener('mousedown', dragForm);          // 表单内容不可选，不然看着不舒服     loginForm.onselectstart = function(e) {         e.preventDefault();     }          // 1、实现小眼睛改变密码输入状态     function setEye() {            if (!eyeFlag) {             eyeState.className = 'open';             pswInput.type = 'text';             eyeFlag = 1;         } else {             eyeState.className = 'close';             pswInput.type = 'password';             eyeFlag = 0;         }     }          // 2、外面登录按钮实现表单、遮罩层的显示和它自己隐藏     function goLogin() {         loginBg.style.visibility = 'visible';         loginForm.style.display = 'block';         this.style.display = 'none';     }          // 3、关闭按钮实现表单、遮罩层的隐藏和外面登录按钮的显示     function leaveLogin() {         loginBg.style.visibility = 'hidden';         loginForm.style.display = 'none';         login.style.display = 'block';     }          // 4、实现表单拖拽效果     function dragForm(e) {         // 当鼠标在表单的标题按下时获取它在表单元素内的坐标并绑定移动事件         var x = e.pageX - this.parentNode.offsetLeft;         var y = e.pageY - this.parentNode.offsetTop;         document.addEventListener('mousemove', move);         // 鼠标弹起移除移动事件         this.addEventListener('mouseup', function() {             document.removeEventListener('mousemove', move)         });         function move(event) {             loginForm.style.left = event.pageX - x + 'px';             loginForm.style.top = event.pageY - y + 'px';     } }