拖拽

hello_realWorld

于 2016-10-13 22:12:08 发布

阅读量381

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hello_realWorld/article/details/52810648

<!doctype html>
<html>
<head>
<style>
div{width:200px;height:200px;background:green;position:absolute;}
</style>
</head>
<body>
<div></div>
</body>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
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;
var t=oEvent.clientY-disY;
if(l<0)
{
l=1;
}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}

if(t<0)
{
t=0;
}else 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>
</html>