js实现模态窗口的拖拽功能-创新互联
一．用到的几个基本概念：
(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);
}
}
}四．实现效果图,随着鼠标的拖拽，弹窗会在整个可视区进行移动
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章题目：js实现模态窗口的拖拽功能-创新互联
文章源于：http://6mz.cn/article/dsejii.html