js implements modal box drag and drop

Effect display and demand analysis

Show results

Insert picture description here

demand analysis

After clicking login, the login form and mask layer are displayed, and click the close button to hide.
You can view or hide it in plain text when you enter the password.
You can drag the form after pressing the mouse on the head of the form.
The mouse bounces and drags to end.

Code analysis

HTML code

<body>
    <a href="javascript:;" class="login">登录我的账号</a>
    <form action="">
        <h4>账号登录</h4>
        <div class="login-items">
        	<label for="uname">用户名：</label >
        	<input type="text" placeholder="请输入用户名" id="uname">
        	</div>
        <div class="login-items">
            <label for="psw">登录密码：</label>
            <input type="password" name="" id="psw" placeholder="请输入您的密码">
            <span class="close" id="eye-state"></span>
        </div>
        <a href="javascript:;" class="login-btn">登录账号</a >
        <a href="javascript:;" class="close-btn">关闭</a >
    </form>
    <div id="bg" class="login-bg"></div>
</body>
<script src="js/模态框.js"></script>

js code

	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';
    }
}

analysis

In the password input box, when you click the eye behind the span element, the eyeFlag variable is used to determine the type attribute of the form and the class name of the span (which small eye image should be used).
The mouse has a drag effect after being pressed in the title area of the form, so bind the mousedown event to the title.
The mousemove and mouseup events are bound to document and this (title) respectively after the mouse is pressed.

If the mousemove event is bound to the title during drag and drop, a bug will occur. When dragging quickly, the mouse will leave the title, causing the form to fail to keep up. So bind this event to document.

The principle of the form following the mouse: When the mouse is pressed, the coordinates of the form on the page are obtained according to the coordinates of the mouse and the form on the page (the position is unchanged during the dragging process). In the process of mouse movement, the dynamic coordinates of the form on the page can be obtained according to the dynamic coordinates of the mouse on the page and its coordinates on the form.