标签：onclick blog 部分 null http setw gis tle client
之前写过一篇关于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 }
标签：onclick blog 部分 null http setw gis tle client
原文地址：http://www.cnblogs.com/zou1052265451/p/6753441.html
