鼠标拖动面板

Posted 2020-09-13 螃蟹在剥我的壳

之前写过一篇关于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     }