原生js实现拖拽效果
css代码:
随便写的一些样式,没有具体微调,敬请谅解~~
*{
margin: 0;
padding: 0;
}
.btn {
text-align: center;
margin-top: 30px;
}
.login_bg {
display: none;
position: fixed;
background: rgba(0, 0, 0, .7);
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 10;
}
.login {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16px;
padding: 20px;
z-index: 100;
}
.closeBtn {
position: fixed;
right: -22px;
top: -22px;
width: 40px;
height: 40px;
line-height: 40px;
background: #fff;
border-radius: 50%;
font-size: 18px;
padding: 6px;
}
.title {
text-align: center;
padding: 20px 0;
}
.userName {
display: flex;
align-items: center;
padding: 10px 0;
}
input {
flex: 1;
}
.userName div {
width: 80px;
text-align: right;
}
.password {
display: flex;
align-items: center;
padding: 10px 0;
}
.password div {
width: 80px;
text-align: right;
}
.login_btn {
margin: 10px 60px;
border: 1px solid #F9E79F;
text-align: center;
padding: 10px 0;
}
js代码:
<div class="btn">点击我出现登录弹框</div>
<div class="login_bg"></div>
<div class="login">
<span class="closeBtn">关闭</span>
<div class="title">登录会员</div>
<div class="userName">
<div>用户名:</div>
<input type="text" placeholder="请输入用户名">
</div>
<div class="password">
<div>密码:</div>
<input type="text" placeholder="请输入密码">
</div>
<div class="login_btn">登录</div>
</div>
<script>
var btn = document.querySelector('.btn');
var login_bg = document.querySelector('.login_bg');
var login = document.querySelector('.login');
var closeBtn = document.querySelector('.closeBtn');
var title = document.querySelector('.title');
btn.addEventListener('click', function () {
login_bg.style.display = "block";
login.style.display = "block";
})
closeBtn.addEventListener('click', function() {
login_bg.style.display = "none";
login.style.display = "none";
})
title.addEventListener('mousedown', function(e){
// 兼容ie 6 7 8
var e = e || window.event
// e.pageX 鼠标点击时鼠标离左侧的距离 e.pageY 鼠标点击时鼠标离顶部的距离
// login.offsetLeft login盒子距body左侧的距离
// login.offsetTop login盒子距body顶部的距离
var x = e.pageX - login.offsetLeft; // 鼠标到login盒子左侧的距离
var y = e.pageY - login.offsetTop; // 鼠标到login盒子顶部的距离
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', function(){
document.removeEventListener('mousemove', move)
})
})
</script>