关闭

拖拽Div

标签: JS
168人阅读 评论(0) 收藏 举报
分类:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:200px;height:200px;background:green;position:absolute;}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');

oDiv1.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv1.offsetLeft;
var disY=oEvent.clientY-oDiv1.offsetTop;

document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

if(l<0){
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv1.offsetWidth){
l=document.documentElement.clientWidth-oDiv1.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv1.offsetHeight){
t=document.documentElement.clientHeight-oDiv1.offsetHeight;
}

oDiv1.style.left=l+'px';
oDiv1.style.top=t+'px';
}
document.onmouseup=function(){
document.onmousemove='';
document.onmouseup='';
}

return false;
}
}
</script>
</head>
<body>
<div id="div1">aaa</div>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9648次
    • 积分:818
    • 等级:
    • 排名:千里之外
    • 原创:73篇
    • 转载:0篇
    • 译文:3篇
    • 评论:1条
    文章分类
    最新评论