JavaScript-实现简单的拖拽动态框效果

最好的人啊

已于 2022-07-06 18:46:50 修改

阅读量489

点赞数 6

分类专栏： JavaScript 文章标签： javascript 前端 html css 开发语言

于 2022-07-06 16:25:06 首次发布

本文链接：https://blog.csdn.net/qq_52499703/article/details/125640180

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

志犹学海，业比登山。——王通

一，css样式部分

取消了浏览器默认的内边距和外边距

设置了一些部分样式

  <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .bg {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgb(0, 0, 0, .4);
            z-index: 9998;
            display: none;
        }

        .login {
            width: 600px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            background: #fff;
            display: none;

        }

        .title {
            height: 45px;
            line-height: 45px;
            text-align: center;
            border-bottom: 1px solid #DCDCDC;
            position: relative;
            cursor: move;
        }

        .content p {
            text-align: center;
            line-height: 45px;
        }

        .title a {
            display: block;
            position: fixed;
            top: 2px;
            right: 5px;
            z-index: 9999;
        }
    </style>

二，HTML-body部分

 <!-- 制作登录框 -->
    <a href="javascript:;" id="loginA">注册/登录</a>
    <!-- 登录弹框 -->
    <div class="login">
        <div class="title">
            用户登录 <a href="javascript:;" id="close">关闭</a>
        </div>
        <div class="content">
            <p> 用户名：<input type="text" value="" /></p>
            <p> 密码：<input type="password" value="" /></p>
            <p> <input type="button" value="提交" /></p>
        </div>
    </div>
    <div class="bg"></div>

三，JS部分

注意：

offset获得的距离不计算 translate偏移的距离所以这里我们自己减去偏移的一半距离

		<script type="text/javascript">
			var loginA = document.querySelector('#loginA');
			var loginDiv = document.querySelector('.login');
			var close = document.querySelector('#close');
			var title = document.querySelector('.title');
			var bgDiv = document.querySelector('.bg');
			
			//显示登录框
			loginA.addEventListener('click',function(){
				loginDiv.style.display = 'block';
				bgDiv.style.display = 'block';
			})
			
			//隐藏登陆框
			close.addEventListener('click',function(){
				loginDiv.style.display = 'none';
				bgDiv.style.display = 'none';
			})
			
			//移动登录框
			//添加鼠标按下时事件 发生
			title.addEventListener('mousedown',function(e){
				//获得鼠标在登陆框上的位置
				//注意 offset获得的距离 不计算 translate偏移的距离 所以这里我们自己减去偏移的一半距离
				// var x =e.pageX - (loginDiv.offsetLeft-300);
				// var y = e.pageY - (loginDiv.offsetTop-150);
				// console.log(e.pageX,loginDiv.offsetLeft);
				// console.log(x,y);
				var x =e.pageX - (loginDiv.offsetLeft);
				var y = e.pageY - (loginDiv.offsetTop);
				
				//计算鼠标移动时 登陆框需要移动的距离
				document.addEventListener('mousemove',move);
				function move(e){
					var newX = e.pageX - x;
					var newY = e.pageY - y;
					// loginDiv.style.left = newX +300+'px';
					// loginDiv.style.top = newY +150+'px';
					loginDiv.style.left = newX+'px';
					loginDiv.style.top = newY+'px';
				}
				
				//清除 mousemove移动事件
				document.addEventListener('mouseup',function(){
					document.removeEventListener('mousemove',move);
				})
				
			})
		</script>

四，完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}

			.bg{
				width: 100%;
				height: 100%;
			   position: fixed;
				top: 0px;
				left:0px;
				 background: rgb(0,0,0,.4);
				 z-index: 9998;
				 display: none;
			}
			.login{
				 width: 600px;
				 height: 300px;
				 position: fixed;
				 top:50%;
				left:50%;
				transform: translate(-50%,-50%);
				z-index: 9999;
				background: #fff;
				display: none;
							
			}
			.title{
			height: 45px;
			 line-height: 45px;
			text-align: center;
			border-bottom: 1px solid #DCDCDC;
			position: relative;
			cursor: move; 
			}
			.content p{
				 text-align: center;
				 line-height: 45px;
			}
			.title a{
				 display: block;
				 position: fixed;
				top:2px;
				 right: 5px;
				 z-index: 9999;
			}
		</style>
	</head>
	<body>
		<!-- 制作登录框 -->
		
		 <a href="javascript:;" id="loginA">注册/登录</a>
		<!-- 登录弹框 -->
		<div class="login">
		      <div class="title">
				  用户登录 <a href="javascript:;" id="close">关闭</a>
			  </div>
			  <div class="content">
				 <p> 用户名：<input type="text" value="" /></p>
				 <p>  密码：<input type="password" value="" /></p>
				  <p> <input type="button" value="提交" /></p>
			  </div>
		</div>
		<div class="bg"></div>
		<script type="text/javascript">
			var loginA = document.querySelector('#loginA');
			var loginDiv = document.querySelector('.login');
			var close = document.querySelector('#close');
			var title = document.querySelector('.title');
			var bgDiv = document.querySelector('.bg');
			
			//显示登录框
			loginA.addEventListener('click',function(){
				loginDiv.style.display = 'block';
				bgDiv.style.display = 'block';
			})
			
			//隐藏登陆框
			close.addEventListener('click',function(){
				loginDiv.style.display = 'none';
				bgDiv.style.display = 'none';
			})
			
			//移动登录框
			//添加鼠标按下时事件 发生
			title.addEventListener('mousedown',function(e){
				//获得鼠标在登陆框上的位置
				//注意 offset获得的距离 不计算 translate偏移的距离 所以这里我们自己减去偏移的一半距离
				// var x =e.pageX - (loginDiv.offsetLeft-300);
				// var y = e.pageY - (loginDiv.offsetTop-150);
				// console.log(e.pageX,loginDiv.offsetLeft);
				// console.log(x,y);
				var x =e.pageX - (loginDiv.offsetLeft);
				var y = e.pageY - (loginDiv.offsetTop);
				
				//计算鼠标移动时 登陆框需要移动的距离
				document.addEventListener('mousemove',move);
				function move(e){
					var newX = e.pageX - x;
					var newY = e.pageY - y;
					// loginDiv.style.left = newX +300+'px';
					// loginDiv.style.top = newY +150+'px';
					loginDiv.style.left = newX+'px';
					loginDiv.style.top = newY+'px';
				}
				
				//清除 mousemove移动事件
				document.addEventListener('mouseup',function(){
					document.removeEventListener('mousemove',move);
				})
				
			})
		</script>
		
	</body>
</html>