鼠标拖动面板

女爷i 2022-06-16 08:28 241阅读 0赞

之前写过一篇关于form表单验证随笔，后来添加了一点点内容，使得可以使用鼠标将其拖动，为了完整性，还是写一遍随笔吧；加上这部分内容后，HTML和CSS部分，也进行了少量修改，这里就补贴修改后的代码了，仅仅将添加的JS部分贴出来：

首先是还是展示一下效果图吧：![1108068-20170423183637226-1611186987.png][]

点击注册，出现注册页面，这个就简单了：

//点击显示注册页面  
("regis").onclick = function() \{ ("regis").onclick = function() \{ ('div').style.visibility = 'visible';  
\}

然后添加的是鼠标拖曳事件，使用onmousedown，onmousemove，onmouseup事件：

![复制代码][copycode.gif]

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     }

![复制代码][copycode.gif]

[1108068-20170423183637226-1611186987.png]: /images/20220616/d15a13664acc4b3badd3cc795d382bdc.png
[copycode.gif]: /images/20220616/85f4d22b40da4d19ae8342441909c4e8.png