JavaScript中随着鼠标拖拽而移动的块
这里要设置一个div块，你按住它拖拽，它会随着你的鼠标走，比如常见的登录框。
给这个div设置简单的样式：
由于div是要跟着鼠标活动的，所以必须把position设置为绝对定位，也就是位置可以改变才行：
<style type="text/css">
#div1{width: 100px; height: 100px; background: red; position: absolute;}
</style>
HTML部分：
<body>
<div id="div1">被拖拽的块</div>
</body>
对这个div进行操作：
由于按下鼠标点在div的那一刻，它里面的某一点的位置与div的距离就是恒定的，才能拖拽。所以，我们可以先求出这个点距离div的两边的距离disX和disY。
var disX=0;//鼠标距离div的边的横向距离
var disY=0;//鼠标距离div的边的纵向距离
div移动后：
div的位置变成了鼠标点的位置与点距离div的边距的差值
也就是left为oEvent.clientX-disX，
top为oEvent.clientY-disY；
设置变量存储div的坐标：
var l=oEvent.clientX-disX;//div的左坐标
var t=oEvent.clientY-disY;//右坐标
当鼠标要把这个div拖拽出可视区之时，我们要阻止：
左侧要拖拽出去时，也就是div的左边距要<0了，设置这左边距为0，就不能跑出左侧了。
上边要出去时，也就是div的top要<0了，设置这上边距为0，就不能跑出上侧了。
右侧要出去时，也就是div的左边距要大于可视区的宽度与div宽度的差了，那设置两者相等，就无法超出范围了；超出下端也是同理。
//div要拖出可视区左侧时：
if(l<0)
{
l=0;
}
//div要拖出可视区右侧时：
//document.documentElement.clientWidth 可视区的宽度
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
//div要拖出可视区上边时：
if(t<0)
{
t=0;
}
//div要拖出可视区下边时：
if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
最终得到div的位置：
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
当鼠标松开的时候，div不再跟着跑，也就是设置onmousemove没有了，才可以。
整个程序如下：
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');//获取这个div
var disX=0;//鼠标距离div的边的横向距离
var disY=0;//鼠标距离div的边的纵向距离
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;//div的左坐标
var t=oEvent.clientY-disY;//右坐标
//div要拖出可视区左侧时：
if(l<0)
{
l=0;
}
//div要拖出可视区右侧时：
//document.documentElement.clientWidth 可视区的宽度
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
//div要拖出可视区上边时：
if(t<0)
{
t=0;
}
//div要拖出可视区下边时：
if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
}
return false;//阻止默认事件
};
};
</script>
