拖拽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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

复制并拖拽Div

  • 2017年11月10日 17:03
  • 143KB
  • 下载

jquery 拖拽div

  • 2015年07月14日 15:40
  • 34KB
  • 下载

DOM事件 --鼠标拖拽div

实现效果: body{margin:0;padding:0;} #wrap{width:300px;height:200px;border:1px solid #FFFFCC...

js实现弹出div任意拖拽

  • 2015年08月17日 14:32
  • 94KB
  • 下载

JQuery拖拽通过八个点改变div大小

(function($) { /** * 默认参数 */ var defaultOpts = { stage: document, //舞台 ...

DIV+CSS拖拽功能

  • 2008年07月21日 09:47
  • 6KB
  • 下载

弹出一个可拖拽的div

  • 2013年11月06日 17:15
  • 3KB
  • 下载

详解原生JavaScript实现div拖拽功能

div拖拽是使用JavaScript操作HTML元素最基本的一个功能,在很多现有JavaScript库中都实现了这一功能,例如jQuery UI中可以很方便的实现各种拖拽功能,但是在实际操作中尤其是找...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:拖拽Div
举报原因:
原因补充:

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