[转]JavaScript简单实现div拖拽

最新推荐文章于 2025-12-10 13:33:14 发布

最新推荐文章于 2025-12-10 13:33:14 发布 · 77 阅读

文章标签：

#JavaScript #Firefox #Opera #IE #.net #ViewUI

本文介绍了一种在不同浏览器（包括IE、Opera和Firefox）上实现元素拖曳功能的方法。该方法通过监听鼠标事件并调整元素的位置来实现拖动效果，并支持限制拖曳范围的功能。

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.youkuaiyun.com/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>

来源： http://blog.youkuaiyun.com/btbtd/archive/2006/11/10/1377810.aspx