案例分析:
1、点击弹出框,模块框和遮挡层就会显示出来 display:block;
2、点击关闭按钮,模块框和遮挡层就会隐藏出来
3、鼠标在页面中的拖拽原理:鼠标按下并且移动,之后再松开鼠标
4、触发事件为鼠标按下mousedown 鼠标移动mousemove 鼠标弹起mouseup
5、拖拽过程:鼠标移动中,获得最新的值赋给模态框的top和left的值,这样模态框就可以跟着鼠标走了
6、鼠标按下触发的事件源是上一层 id title
7、鼠标的坐标减去鼠标在盒子中的坐标 才是模态框正真的坐标
8、鼠标按下 就知道鼠标的坐标
TTML代码
css部分
JS部分
值得注意的是,关于鼠标坐标要赋值给login.style.left,之后移除鼠标事件需要 用到removeEventLIstener。调用函数时,调用谁就清除谁,因此,把函数定义为move之后再清除。
Javascript模拟框拖拽案例详细分析
![](https://img-home.csdnimg.cn/images/20240711042549.png)