标签：盒子 鼠标 按下 pageY login 移动 页面

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。