拖拽Div

原创 2016年08月30日 16:51:25
<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS 实现 DIV 拖拽

Drag拖拽DIV的javascript

拖拽 DIV 效果

jsmartdrag实例页面   #ul{     width: 330px;     height: 230px;     position: relative;     list-style: ...

div拖拽,记录轨迹

div自由拖拽

div自由拖拽 <meta http-equiv="Con

js实现弹出div任意拖拽

  • 2015-08-17 14:32
  • 94KB
  • 下载

js div拖拽示例

div拖拽示例 .div-box{ width: 320px; height: 55px; margin: auto; background: #ddd; position...

jquery 拖拽div

  • 2015-07-14 15:40
  • 34KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)