首页 > 代码库 > 鼠标拖动面板
鼠标拖动面板
之前写过一篇关于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 }
鼠标拖动面板
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。