原生js实现弹出层登录拖拽功能

window.onload = function() {
 var btn = document.getElementsByClassName('login')[0]
 var close = document.getElementById('close');
 var login = document.getElementById('login');
 var top = (document.documentElement.clientHeight - 250) / 2; //top值等于(获取页面可视区域的宽度 - 登录框的高度) / 2
 var left = (document.documentElement.clientWidth - 350) / 2;
 var open = document.getElementById('screen');
 btn.onclick = function() {
  login.style.display = 'block';
  login.style.left = left + 'px';
  login.style.top = top + 'px';
  open.style.display = 'block';
  open.style.width = getInner().width + 'px'; //弹出层的宽度等于可视窗口的宽度
  open.style.height = getInner().height + 'px';
 }
 close.onclick = function() {
  login.style.display = 'none';
  open.style.display = 'none';
 }
 window.onresize = function() {
   var top = (getInner().height - 250) / 2;
   var left = (getInner().width - 350) / 2;
   login.style.left = left + 'px';
   login.style.top = top + 'px';
  }
  //跨浏览器获取可视窗口
 function getInner() {
  if (window.innerWidth != 'undefined') { //IE 不支持返回undefind
   return {
    width: window.innerWidth,
    height: window.innerHeight
   }
  } else {
   return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
   }
  }
 }
 //实现拖拽功能 ，三个事件 mousemove , mouseup ,mousedown
 //clientX ,clientY 时鼠标指针相对于整个屏幕的坐标距离
 //offsetLeft, offsetTop 获取当前元素相对于父元素的位置,在这里，父元素是document
 login.onmousedown = function(e) {
   stop(e); //阻止事件默认行为
   var e = e || window.event;
   var oLeft = e.clientX - login.offsetLeft; //login.offsetLeft 获取盒子边框到浏览器左边框的距离
   var otop = e.clientY - login.offsetTop;
   document.onmousemove = function(e) { //移动的是整体的doucment
    var e = e || window.event;
    //不能移出可视区域
    var left = e.clientX - oLeft;
    var top = e.clientY - otop;
    //左右
    if (left < 0) { //如果盒子距左边的距离小于零，即超出
     left = 0;
    } else if (left > getInner().width - login.offsetWidth) { //可视区域的长度，减去盒子的长度 offsetWidth
     left = getInner().width - login.offsetWidth;
    }
    //上下
    if (top < 0) {
     top = 0;
    } else if (top > getInner().height - login.offsetHeight) {
     top = getInner().height - login.offsetHeight;
    }
    login.style.left = left + 'px';
    login.style.top = top + 'px';
   }
   document.onmouseup = function() {
    document.onmousemove = null;
    document.onmouseup = null;
   }
  }
  //取消默认行为
 function stop(e) {
  var e = e || window.event;
  if (typeof e.preventDefault != 'undefined') {
   e.preventDefault(); //W3C
  } else {
   e.returnValue = false; //IE阻止事件默认行为
  }
 }
}

<div id="header">
 <div class="logo"><img src="/UploadFiles/2021-04-02/logo.gif">

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