这里要设置一个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.οnlοad=function(){ var oDiv=document.getElementById('div1');//获取这个div var disX=0;//鼠标距离div的边的横向距离 var disY=0;//鼠标距离div的边的纵向距离 oDiv.οnmοusedοwn=function(ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.οnmοusemοve=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.οnmοuseup=function() { document.οnmοusemοve=null; document.οnmοuseup=null; } return false;//阻止默认事件 }; }; </script>