html和css
<body>
<div id="div1">
</div>
</body>
#div1{width: 200px;height: 200px;background: red;position: absolute;}
JS代码
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmousedown=function(ev){
var e=ev||window.event;
var x=e.clientX-oDiv.offsetLeft;
var y=e.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var e=ev||window.event;
var l=e.clientX-x;
var t=e.clientY-y;
if(l<=0){
l=0;
}
var windowWidth=document.documentElement.clientWidth||document.body.clientWidth;
if(l>=windowWidth-oDiv.offsetWidth){
l=windowWidth-oDiv.offsetWidth;
}
if(t<=0){
t=0;
}
var windowHeight=document.documentElement.clientHeight||document.body.clientHeight;
if(t>=windowHeight-oDiv.offsetHeight){
t=windowHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+"px";
oDiv.style.top=t+"px";
}
}
oDiv.onmouseup=function(){
document.onmousemove=null;
}
}
上述实现了禁止div块拖拽出界。
当鼠标按下时,要确定鼠标与被拖拽的块的相对位置。
然后鼠标移动时,应该时鼠标在document上移动,因为鼠标和div块是相对禁止的。
上述的l和t分别为div距离浏览器窗口的左边和上边的距离。