拖动模态框
实现步骤:
①点击弹出层,模态框和遮挡层就会显示出来display:block;
②点击关闭按钮,模态框和遮挡层就会隐藏起来display:none;
③在页面中拖拽的原理︰鼠标按下并且移动,之后松开鼠标;
④触发事件是鼠标按下mousedown,鼠标移动mousemove,鼠标松开mouseup;
⑤拖拽过程:鼠标移动过程中,获得最新的值赋值给模态框的left和top值,这样模态 框可以跟着鼠标走了;
⑥鼠标按下触发的事件源是最上面一行,就是id为title;
⑦鼠标的坐标减去鼠标在盒子内的坐标, 才是模态框真正的位置;
⑧鼠标按下,我们要得到鼠标在盒子的坐标;
⑨鼠标移动,就让模态框的坐标设置为︰鼠标坐标减去盒子坐标即可,注意移动事件写到按下事件里面;
⑩鼠标松开,就停止拖拽,就是可以让鼠标移动事件解除。
<script>
// 1.获取元素
var login=document.querySelector('.login');
var mask=document.querySelector('.login-bg');
var link=document.querySelector('#link');
var closeBtn=document.querySelector('#closeBtn');
var title=document.querySelector('#title');
// 2.点击弹出层这个链接 让mask 和 login 显示出来
link.addEventListener('click',function(){
mask.style.display='block';
login.style.display='block';
})
// 3.点击closeBtn 隐藏mask 和 login
closeBtn.addEventListener('click',function(){
mask.style.display='none';
login.style.display='none';
})
// 4.开始拖拽
//(1) 当我们鼠标按下,就获得鼠标在盒子内的坐标
title.addEventListener('mousedown',function(e){
var x=e.pageX-login.offsetLeft;
var y=e.pageY-login.offsetTop;
//(2) 鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove',move)
function move(e){
login.style.left=e.pageX-x+'px';
login.style.top=e.pageY-y+'px';
}
//(3) 鼠标弹起,就让鼠标移动时间解除
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move)
})
})
</script>