一．用到的几个基本概念：
(1)document.body.clientWidth/clientHeight :获得BODY对象宽度/高度
(2)document.documentElement.clientWidth/clientHeight:用来获得可见区域宽度/高度。
clientWidth/clientHeight的计算方法:
(3)offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。
offsetLeft:获取对象相对于页面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于页面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth/offsetHeight计算方法：
（4）clientX/clientY ：事件属性返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的水平坐标/垂直坐标（不包含滚动条）。
二．拖拽的主要实现思想
分为三步：
（1）用户在拖放元素上按下鼠标，拖放开始
login.addEventListener("mousedown",drag,false);
（2）用户在拖放元素上移动鼠标，拖放元素在页面中进行拖动
document.addEventListener("mousemove",move,false);
（3）用户鼠标一开拖放元素，拖放行为结束
document.addEventListener("mouseup",up,false);
三．实现具体js代码
计算
安全
数据库
网络和加速
企业服务
window.onload = function () {
var close = document.getElementsByClassName('close');
var login = document.getElementById('login');
var logins = document.getElementsByClassName('login');
var screen = document.getElementById('dropback');
function show(obj) {
//获取浏览器的宽和高
var top = (document.documentElement.clientHeight - 250) / 2 - 150;
var left = (document.documentElement.clientWidth - 300) / 2;
//当点击登录按钮时，登录弹窗出现，遮罩层显示
screen.style.display = 'block'; //遮罩层显示
obj.style.display = 'block'; //登录弹窗出现
obj.style.left = left + 'px'; //登录弹窗在屏幕中的位置
obj.style.top = top + 'px';
}
function hide(obj) {
//点击差号时，登录弹窗消失，遮罩层消失
obj.style.display = 'none';
screen.style.display = 'none';
}
//差号注册点击事件 点击差号，弹窗消失
close[0].addEventListener("click", function () {
hide(login);
}, false);
//登录按钮注册点击事件，点击登录弹出登录弹窗
logins[0].addEventListener("click", function () {
show(login);
}, false);
//弹出框拖拽实现
login.addEventListener("mousedown",drag,false);
function drag(e){
var e = e||window.event;
var _this = this;
var diffX = e.clientX - _this.offsetLeft;
var diffY = e.clientY - _this.offsetTop;
document.addEventListener("mousemove",move,false);
document.addEventListener("mouseup",up,false);
function move(e){
var left = e.clientX-diffX;
var top = e.clientY-diffY;
if(left<0){
left = 0;
}else if(left>document.documentElement.clientWidth - e.clientX){
//没有使用document.body.clientWidth因为此时页面的高度只有100多，而现在要求弹窗在整个可视区中移动
left = document.documentElement.clientWidth - _this.offsetWidth;
}
if(top<0){
top = 0;
}else if(top>document.documentElement.clientHeight - e.clientY){
top = document.documentElement.clientHeight - _this.offsetHeight;
}
_this.style.left = left + 'px';
_this.style.top = top + 'px';
}
function up(){
document.removeEventListener("mousemove",move,false);
document.removeEventListener("mouseup",up,false);
}
}
}四．实现效果图,随着鼠标的拖拽，弹窗会在整个可视区进行移动
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
