鼠标控制盒子在页面中移动
首先先了解鼠标的三个事件：
- mousedown：鼠标按下时触发事件。
- mousemove：鼠标移动时出发的事件。
- mouseup：鼠标弹起时触发的事件。
原理：
- 通过鼠标按下触发事件获取鼠标在盒子中的位置，既鼠标坐标减去盒子的坐标x,y；鼠标的位置为e.pageX,e.pageY;盒子位置则是offsetLeft和offsetTop；那么x=e.page-offsetLeft,y=e.pageY-offsetTop.
- 然后在鼠标按下事件中写鼠标移动触发事件，通过鼠标的不断移动，我们就可以动态的获取盒子位置x和y，既盒子跟随鼠标移动。
- 最后在我们松开盒子的时候，把鼠标按下后动态获取盒子位置的函数删除掉，就可以了。
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 })
原文：https://www.cnblogs.com/joker-sqr/p/15017346.html