原生js实现登陆框拖拽效果

Webmaster · 浏览 574 · 点赞 0 · 评论 0 · 4年前 (2018-10-03)

摘要：拖拽案例也是js的必学涉及到的也比较多，曾经看过百度弹出登陆框，可以自由拖拽，那么此次分享的就是实现简单拖拽的登陆框，涉及到的具体函数只是就不一一解释了。具体的介绍一下实施思路。

具体实施代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{text-decoration: none;}
#box{width: 300px; height:220px; border: 1px solid #8B8B7A; position:absolute; font-size: 14px;left: 40%; top:200px;z-index: 999;background: #fff;}
#drt{height: 30px;background-color: #ccc; text-align: center; color: #fff; cursor: move;margin-bottom: 15px;}
#box label{display: inline-block; width: 90px; margin: 10px 0px; text-align: right;}
#box input[type=text],#box input[type=password]{width: 150px; height:20px; border-radius:3px; border: 1px solid #ccc;}
#box input[type=submit]{width:180px; height: 25px;background: #ccc; border: none;border-radius:3px; margin:10px 23%; color: #fff; cursor: pointer;}
#box p{text-align: right; margin-right: 30px;}
</style>
</head>
<body>
<div id="box">
<div id="drt"><big>用户登陆</big> 这里拖拽哦~</div>
<form action="" method="post">
<label for="UserName">用户名：</label>
<input type="text" id="UserName" name="username">
<label for="UserPwd">密  码：</label>
<input type="password" id="UserPwd" name="userpwd">
<input type="submit" id="send" value="登陆" />
</form>
<p>其他<a href="#">登陆方式»</a></p>
</div>
<script>
//获取节点
var box = document.getElementById("box"),
drt = document.getElementById("drt")
//鼠标移入盒子内鼠标的位置
drt.onmousedown = function (e){
//鼠标点击时获取当前鼠标坐标值作为鼠标起始值
var oEvent = e || event,
MopX = oEvent.clientX,
MopY = oEvent.clientY;
//获取盒子起始位置
var ro = this.getBoundingClientRect(),
BopY = ro.top, //盒子头部外边距距离起始位置
BopX = ro.left;
//鼠标移动事件
document.onmousemove = function (e){
//当前鼠标移动事件对象
var oEvent = e || event;
//盒子移动位置 = 鼠标位置增量+盒子起始位置
//鼠标增量 = 鼠标移动后位置 - 鼠标起始位置
box.style.left = (oEvent.clientX-MopX+BopX)+"px" ;
box.style.top = (oEvent.clientY-MopY+BopY)+"px";
//console.log(oEvent.clientX)
};
};
//按键松开时使用null取代移动后面的函数，实现松开鼠标，div不再移动
document.onmouseup = function(){
document.onmousemove = null; //null
};
</script>
</body>
</html>

实施前思路：

盒子的初始位置，以至于后面二次拖拽后变动的二次位置都将记录，都将作为盒子拖拽移动的起始位置。
鼠标位置从点击开始记录起始位置（包括二次移动后位置），然后在根据移动后记录鼠标位置X值、Y值的增量值（鼠标移动增量=鼠标为移动后-鼠标起始位置），那么盒子的无缝移动=盒子的起始位置+鼠标移动的X、Y的增量值。

至此文章再次结束，有更好的建议，望指教！