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不是一样的值，他们分别来自不同事件

  
  
  
  
  
    *{
      padding: 0;
      margin: 0;
    }
    button {
      width: 80px;
      height: 30px;
      display: block;
      margin: 0 auto;
      background-color:#3b7ae3;
      border-style: none;
      border-radius: 5px;
      color: #ffffff;
      cursor: pointer;
    }
    .mask {
      position: absolute;
      top:0;
      width: 100%;
      height: 1000px;
      background-color:black;
      opacity: 0.75;
      z-index: 99;
    }
    .login {
      width: 350px;
      height: auto;
      border: 1px solid #fff;
      position: absolute;
      top:0;
      left: 0;
      z-index: 1000;
    }
    .title {
      width:330px;
      height: 50px;
      padding-left: 20px;
      line-height: 50px;
      background-color: #eee;
      position: relative;
      cursor: move;
    }
    span {
      position: absolute;
      right:10px;
      font-size: 30px;
      font-weight: 300;
      cursor: pointer;
    }
    .current {
      padding: 10px 15px;
      background-color: #fff;
    }
    .user,
    .password{
      margin-bottom: 10px;
    }
    .pt {
      width:308px;
      height: 40px;
      padding-left: 10px;
    }
    .submit {
      width: 320px;
      height: 48px;
      background-color:#3b7ae3;
      color: #fff;
      font-size: 16px;
      border-style: none;
      cursor: pointer;
    }
  
  


  登录
  
    
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。