鼠标控制盒子在页面中移动

首先先了解鼠标的三个事件：

1. mousedown：鼠标按下时触发事件。
2. mousemove：鼠标移动时出发的事件。
3. mouseup：鼠标弹起时触发的事件。

原理：

1. 　通过鼠标按下触发事件获取鼠标在盒子中的位置，既鼠标坐标减去盒子的坐标x,y；鼠标的位置为e.pageX,e.pageY;盒子位置则是offsetLeft和offsetTop；那么x=e.page-offsetLeft,y=e.pageY-offsetTop.
2. 　然后在鼠标按下事件中写鼠标移动触发事件，通过鼠标的不断移动，我们就可以动态的获取盒子位置x和y，既盒子跟随鼠标移动。
3. 　最后在我们松开盒子的时候，把鼠标按下后动态获取盒子位置的函数删除掉，就可以了。

 1 //1.当我们鼠标按下，就获得鼠标在盒子内的坐标
 2         box.addEventListener('mousedown',function(e){
 3             var x = e.pageX - login.offsetLeft;
 4             var y = e.pageY - login.offsetTop;
 5             //2.鼠标移动的时候，把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是模态版的left和top值
 6             document.addEventListener('mousemove',move);
 7             function move(e){
 8                 login.style.left = e.pageX - x + 'px';
 9                 login.style.top = e.pageY-y + 'px';
10             }
11             //3.鼠标弹起就让鼠标移动任务移除
12             document.addEventListener('mouseup',function(){
13                 document.removeEventListener('mousemove',move)
14             })
15         })

标签：盒子,鼠标,按下,pageY,login,移动,页面
来源： https://www.cnblogs.com/joker-sqr/p/15017346.html