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;"οnmοusedοwn="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;"οnmοusedοwn="fDragging(this,event,true);"> element<br/> draggingcompatibilityforIE,Opera,Firefox. </div>
shawl.qiu
-11-10
/btbtd
函数:fDragging(obj,e,limit)及使用演示
linenum<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="/1999/xhtml"> <!--DW6--> <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;"οnmοusedοwn="fDragging(this,event,true);"> element<br/> draggingcompatibilityforIE,Opera,Firefox. </div> <divstyle="border:1pxdashedblue;width:180px;text-align:center;position:absolute;left:100px;top:150px;"οnmοusedοwn="fDragging(this,event,true);"> element1<br/> draggingcompatibilityforIE,Opera,Firefox. </div> <divstyle="border:1pxdashedblue;width:180px;text-align:center;position:absolute;left:200px;top:250px;"οnmοusedοwn="fDragging(this,event,false);"> element2<br/> draggingcompatibilityforIE,Opera,Firefox.<br/> <fontcolor="red">draggingeverywhere</font> </div> </div> </body> </html>
