Javascript模拟框拖拽案例详细分析

案例分析：
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之后再清除。