南宁小程序开发,挑战百日学习计划第43天(拖拉登录框的写法)

程序员文章站 2022-03-22 09:57:46

南宁小程序开发：www.zkelm.com今天的主题是做一个移动的登录model框，支持移动拖放！1.首先先用HTML css 来设计一个登录界面，确实要快的话就是直接引用layui 一样的框架就行，简单粗暴，但是现在因为是学习，所以还是手打代码自己diy一个，html代码如下：这里就不一一解析了，移动摩斯框....

南宁小程序开发：www.zkelm.com

今天的主题是做一个移动的登录model框，支持移动拖放！

1.首先先用HTML css 来设计一个登录界面，确实要快的话就是直接引用layui 一样的框架就行，简单粗暴，但是现在因为是学习，所以还是手打代码自己diy一个，
南宁小程序开发,挑战百日学习计划第43天(拖拉登录框的写法)
html代码如下：这里就不一一解析了，

<html>
	<head>
		<meta charset="utf-8">
		<title>移动摩斯框</title>
		<style>
			*{margin: 0;padding: 0;}
			.box{
				width:360px;
				height:180px;
				border:1px solid #aaa;
				margin:10px;
				box-sizing:border-box;
				position: absolute;
			}
			.title{
				height:40px;
				width: 100%;
				text-align:center;
				background-color: #ccc;
				font-size: 20px;
				line-height: 40px;
				font-weight:600;
				color:#333;
			}
			.content{
				width:100%;
				height:100px;
				background-color: #eee;
				padding: 10px;
				box-sizing:border-box;
			}
			.items{
				width:100%;
				height: 40px;
				margin-left: 10px;
			}
			input{
				height:24px;
				outline: none;
				width:68%
			}
			button{
				width:150px;
				height:30px;
				margin:5px auto;
				display: block;
				
			}
			.sub{
				width: 100%;
				height: 30px;
								
			}
			label{font-size: 16px;color:#444;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="title">用户登录</div>
			<div class="content">
				<div class="items"><label for="n">账户：</label><input id="n" type="text"></div>
				<div class="items"><label for="p">密码：</label><input id="p" type="password"></div>
			</div>
			<div class="sub">
				<button class="submit">登录</button>
			</div>
		</div>
	</body>
</html>

完整的javascript控制代码如下：

<script>
		//添加mousedown事件
		document.getElementById("title").onmousedown=function(e){
			document.body.style="background:#eee;opacity:0.8";
			var box=document.querySelector(".box");
			   //先计算鼠标在page中得坐标
			   Eventleft=e.pageX-box.offsetLeft;
			   Eventtop=e.pageY-box.offsetTop;
			   //写移动事件
			   document.addEventListener("mousemove",move);
			   function move(e){	
				   //设置left  和Top则会产生移动
				   box.style.left=(e.pageX-Eventleft)+"px";
				   box.style.top=(e.pageY-Eventtop)+"px";
			   }
			   //绑定onmouseup  鼠标松开时候的事件
			   document.onmouseup=function(){
				   //移除监听事件!
				    document.removeEventListener("mousemove",move);
					document.body.style="";
			   }		  
			   		       
		}
		
	</script>