js实现登录拖拽窗口-创新互联

本文实例为大家分享了js实现登录拖拽窗口的具体代码，供大家参考，具体内容如下

创新互联是一家专注网站建设、网络营销策划、微信平台小程序开发、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立10余年以来，已经为超过千家木托盘各业的企业公司提供互联网服务。现在，服务的超过千家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

做这个案例的两个关键点：

1、用js将盒子在可视区域居中显示

本可以用css将盒子用定位的方式居中显示，但是采用js的方法更好些。
方法：
盒子的left值 = （可视区域的宽度 - 盒子自身的宽度）/ 2;
盒子的top值 = （可视区域的高度 - 盒子自身的高度）/ 2;
这样盒子就居中显示

2、先鼠标按下，然后鼠标在整个文档上移动时，盒子的位置跟着鼠标移动

这一点上要注意的点：

1)鼠标按下时，鼠标相对盒子X方向的位置 = event.clienX- 盒子的offsetLeft
鼠标相对盒子Y方向的位置 = event.clientY - 盒子的offsetTop ;

2)鼠标在移动时，盒子的left值 = event.clientX - 鼠标相对盒子X方向的位置
盒子的top值 = event.clientY - 鼠标相对盒子Y方向的位置

注意 1），2）中的event.clientX/clientY不是一样的值，他们分别来自不同事件

  
  
  
  
  
  


  登录