鼠标拖动面板
之前写过一篇关于form表单验证随笔,后来添加了一点点内容,使得可以使用鼠标将其拖动,为了完整性,还是写一遍随笔吧;加上这部分内容后,HTML和CSS部分,也进行了少量修改,这里就补贴修改后的代码了,仅仅将添加的JS部分贴出来:
首先是还是展示一下效果图吧:
点击注册,出现注册页面,这个就简单了:
//点击显示注册页面
$("regis").onclick = function() {
$('div').style.visibility = 'visible';
}
然后添加的是鼠标拖曳事件,使用onmousedown,onmousemove,onmouseup事件:
1 $("drag").onmousedown = function(e) { 2 var e = e || window.event; //兼容浏览器 3 disX = e.clientX - drag.offsetLeft; //获取鼠标在面板上的坐标 4 disY = e.clientY - drag.offsetTop; 5 $("drag").onmousemove = function(e) { 6 var e = e || window.event; 7 var X = e.clientX - disX; //鼠标拖曳面板时面板距页面左上角的坐标 8 var Y = e.clientY - disY; 9 var winW = document.documentElement.clientWidth || document.body.clientWidth; //获取页面宽高 10 var winH = document.documentElement.clientHeight || document.body.clientHeight; 11 var winW_max = winW - $("drag").offsetWidth; //获取面板在页面可运动的最大距离 12 var winH_max = winH - $("div").offsetHeight; 13 X = (X <= 0) ? 0 : X; //防止拖动到页面之外 14 X = (X > winW_max) ? winW_max : X; 15 Y = (Y <= 0) ? 0 : Y; 16 Y = (Y > winH_max) ? winH_max : Y; 17 $('div').style.left = X + 'px'; 18 $('div').style.top = Y + 'px'; 19 } 20 $("drag").onmouseup = function() { //鼠标抬起时,不能再移动 21 $("drag").onmousemove = null; 22 $("drag").onmouseup = null; 23 } 24 }