在WEB开发过程中，总会遇到一些从未接触过的需求，总是想尽一切办法去研究，最终实现效果，在实现效果的那一刻成就感爆棚，有木有？
留言墙、弹出框等一些常见地方都有拖拽功能，方便用户体验嘛。
实现拖拽功能 ，三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight)，窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理。
之前做的比较多的留言墙效果时写过的，这当时做的笔记，现在来整理整理。
JavaScript代码：
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阻止事件默认行为 } } }
HTML代码：
<div> <div><img src="https://www.jb51.net/images/logo.gif" alt="" /></div> <div>个人中心 <ul> <li><a href="###">设置</a></li> <li><a href="###">换肤</a></li> <li><a href="###">帮助</a></li> <li><a href="###">退出</a></li> </ul> </div> <div>登录</div> </div> <div> <h2><img src="https://www.jb51.net/images/close.png" alt="" />登录</h2> <div>用户名<input type="text" /></div> <div>密 码 <input type="password" /></div> <div> <input type="button" value="" /></div> <div>注册新用户 | 忘记密码</div> </div> <div></div> <script type="text/javascript" src="https://www.jb51.net/demo.js"></script>