可拖动的div——demo
可拖动的div——demo
我们经常会遇到这样的注册界面
我们以前经常可以遇到这种需要注册的网站，如上图：
上图有一个特点，即是上述注册框其实是一个div，同时可以拖动，以下做一个简单的实例，就可以实现炫酷的拖动div效果
第一步：在body标签中设置如下是哪个div
注意：div的包裹关系
//（采用java注释，以下与此相同，纯属个人习惯）
<div id="main"> //这个div是在网页上设置一个大的div，其宽度width一般是960px或者1190px
<div id="login_parent"> //这是一个父类div（相对于下面可拖动的div而言），用来设置div拖动时下面的背景，可以自己设置颜色，或者背景图片，文字等等
<div id="login_panel" onmousedown="mouseDown()" onmouseup="mouseUp()">可拖动的表</div> //这个就是我们需要拖动的div（demo的主角）
</div>
</div>
第二步：分别根据id设置相应的属性，如下：
<style type="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
#main{
width:960px;
margin:0 auto;
border:#000 1px solid;
}
#login_parent{
width:100%;
height:1000px;
left:0px;
top:0px;
position:fixed;
background-color:#666;
}
#login_panel{
width:400px;
height:400px;
background:#0C0;
margin:0 auto;
position:fixed; //下面四个属性不重要，这里只是为了显示demo中的语句，如下图
vertical-align:middle;
text-align:center;
line-height:400px;
font-size:36px;
}
</style>
效果如下：（为了更好的效果，博主采用全屏截图）
第三步：设置可以拖动的方法
<script type="text/javascript">
//以下属性先不用管，等我们在下面定义方法的时候，需要用到什么属性，在来定义全局变量（属性）就可以了
var startX;
var startY;
var moveSwitch = false;
var currentLeft;
var currentTop;
var loginTag = document.getElementById("login_panel");
document.onmousemove = function(e){ //定义一个方法，用来捕捉鼠标的坐标位置
if(moveSwitch){ //类似于if(true);
var x = e.clientX; //e.clientX是一个触摸事件，即是鼠标点击时的X轴上的坐标
var y = e.clientY; //e.clientY是一个触摸事件，即是鼠标点击时的Y轴上的坐标
var distanceX = x-startX; //X轴上获得移动的实际距离
var distanceY = y-startY; //Y轴上获得移动的实际距离
loginTag.style.left = (distanceX+currentLeft)+"px"; //currentLeft下面的方法会有解释，需要注意最后要添加PX单位，如果给left赋值会破坏文档流，不加单位就会无效
loginTag.style.top = (distanceY+currentTop)+"px"; //
}
}
function mouseDown(e){ //鼠标按下事件
e = e?e:window.event; //因为兼容问题，event可能在隐藏参数中，如果隐藏参数没有event事件，则可以使用全局的事件window.event（大家记住写法就可以了）
moveSwitch = true;
startX = e.clientX;
startY = e.clientY;
currentLeft = loginTag.offsetLeft; //通过对象获取对象的坐标
currentTop = loginTag.offsetTop;
}
function mouseUp(){
moveSwitch = false;
}
</script>
执行完成之后可以获得如下效果（为了更好的效果，博主采用全屏截图）
以上便是实例。
需要作出如下补充：
1、在实际项目中，如果这个可拖动的div是一个注册页面，必须完成注册页面时才可以查看页面，我们可以在可拖动的div下面设置一个全页面的div，然后将display设为none
这样就可以避免没有完成注册就进入到网站，使用网站资源（现在一般用的不多）；
2、如果需要炫酷的效果可以设置不同的属性，增加这个可拖动div的质感，使其页面更加美观；
3、这个实例有个问题就是如下图，当我们在最下面的div中加入东西会出现如下情况，显然不是我们所需要的，因为div已经移动到了网页外面了，所以我们需要根据第二步计算鼠标的
移动来控制鼠标移动的范围，当然还要把div本身的长宽考虑在内，这样就可以获得比较炫酷的拖动界面。
