[转]JavaScript简单实现div拖拽

varsoft

浏览: 2438495 次
性别:
来自: 上海

最近访客更多访客>>

wangyy

u012363178

songhait

骑驴找骆驼

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3320)

社区版块

存档分类

JavaScript Firefox Opera IE .net

Javascript元素拖曳操作Byshawl.qiu(兼容IE,Opera,Firefox)

说明:
拖曳流程
鼠标按下->(鼠标移动->元素移动)
鼠标按键弹起->元素停止移动

针对IE,主要使用obj.attachEvent()&&obj.detachEvent()
针对Firefox主要使用DOM2的obj.addEventListener()&&obj.removeEventListener
Opera以上两种方法都支持

在本文中,需要拖曳的元素必须指定style属性为position:absolute;
且应指定left&&top的坐标值,如:

linenum

<divstyle="border:1pxdashedblue;width:180px;text-align:center;position:absolute;left:100px;top:150px;"onmousedown="fDragging(this,event,true);">
element1<br/>
draggingcompatibilityforIE,Opera,Firefox.
</div>

函数fDragging(obj,e,limit)的各参数解释:
obj:HTML元素对象,要拖曳的元素
e:指定为event对象,主要为兼容Firefox
limit:布尔值,指定是否只能在父元素中拖曳,false可移动至任何位置.

函数fDragging(obj,e,limit)应该在HTMLonmousedown属性下使用,如:

linenum

<divstyle="border:1pxdashedblue;width:180px;text-align:center;position:absolute;left:50px;top:50px;"onmousedown="fDragging(this,event,true);">
element<br/>
draggingcompatibilityforIE,Opera,Firefox.
</div>

shawl.qiu
2006-11-10
http://blog.csdn.net/btbtd

函数:fDragging(obj,e,limit)及使用演示

linenum

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>shawl.qiutemplate</title>
<scripttype="text/javascript">
//<![CDATA[
functionfDragging(obj,e,limit){
if(!e)e=window.event;
varx=parseInt(obj.style.left);
vary=parseInt(obj.style.top);
varx_=e.clientX-x;
vary_=e.clientY-y;
if(document.addEventListener){
document.addEventListener('mousemove',inFmove,true);
document.addEventListener('mouseup',inFup,true);
}elseif(document.attachEvent){
document.attachEvent('onmousemove',inFmove);
document.attachEvent('onmouseup',inFup);
}
inFstop(e);
inFabort(e)
functioninFmove(e){
varevt;
if(!e)e=window.event;
if(limit){
varop=obj.parentNode;
varopX=parseInt(op.style.left);
varopY=parseInt(op.style.top);
if((e.clientX-x_)<0)returnfalse;
elseif((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth))returnfalse;
if(e.clientY-y_<0)returnfalse;
elseif((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight))returnfalse;
//status=e.clientY-y_;
}
obj.style.left=e.clientX-x_+'px';
obj.style.top=e.clientY-y_+'px';
inFstop(e);
}//shawl.qiuscript
functioninFup(e){
varevt;
if(!e)e=window.event;
if(document.removeEventListener){
document.removeEventListener('mousemove',inFmove,true);
document.removeEventListener('mouseup',inFup,true);
}elseif(document.detachEvent){
document.detachEvent('onmousemove',inFmove);
document.detachEvent('onmouseup',inFup);
}
inFstop(e);
}//shawl.qiuscript
functioninFstop(e){
if(e.stopPropagation)returne.stopPropagation();
elsereturne.cancelBubble=true;
}//shawl.qiuscript
functioninFabort(e){
if(e.preventDefault)returne.preventDefault();
elsereturne.returnValue=false;
}//shawl.qiuscript
}
//]]>
</script>
</head>
<body>
<divstyle="border:1pxdashedblue;width:760px;height:600px;text-align:center;position:absolute;left:100px;top:10px;">thisparent
<divstyle="border:1pxdashedblue;width:180px;text-align:center;position:absolute;left:50px;top:50px;"onmousedown="fDragging(this,event,true);">
element<br/>
draggingcompatibilityforIE,Opera,Firefox.
</div>
<divstyle="border:1pxdashedblue;width:180px;text-align:center;position:absolute;left:100px;top:150px;"onmousedown="fDragging(this,event,true);">
element1<br/>
draggingcompatibilityforIE,Opera,Firefox.
</div>
<divstyle="border:1pxdashedblue;width:180px;text-align:center;position:absolute;left:200px;top:250px;"onmousedown="fDragging(this,event,false);">
element2<br/>
draggingcompatibilityforIE,Opera,Firefox.<br/>
<fontcolor="red">draggingeverywhere</font>
</div>
</div>
</body>
</html>