重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
js实现登录拖拽窗口-创新互联
本文实例为大家分享了js实现登录拖拽窗口的具体代码，供大家参考，具体内容如下
做这个案例的两个关键点：
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不是一样的值，他们分别来自不同事件
Document
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文名称：js实现登录拖拽窗口-创新互联
分享链接：http://cqcxhl.cn/article/dgshps.html