拖拽Div

<!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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fuxiaomi2016/article/details/52370826
文章标签: JS
个人分类: JS
上一篇只能输入数字的文本框
下一篇绑定事件到同一个标签上
想对作者说点什么? 我来说一句

Div拖拽效果

2014年10月09日 1KB 下载

拖动div到另一个div

2008年10月17日 99KB 下载

漂亮的 多个div(层)拖拽和管理

2009年07月02日 19KB 下载

没有更多推荐了,返回首页

关闭
关闭