shawl.qiu Javascript 元素拖曳类 Dragging class v1.0
说明:其实早先也用 js写过一个相关函数, fDragging.
见: /btbtd/archive//11/10/1377810.aspx
不过说实在的, 真正应用起来还是有点麻烦的, 首先就是那个 css 的 position: absolute, 这个属性一般很难控制, 调用起来也够麻烦的.
因此嘛, 在鄙懒人一懒到底的精神支持下, 就写了这么个类出来了.
调用和设置, 那可不是一般的容易...
唉, 懒人没话说了, over.
目录:
1. 类 Dragging 及调用
shawl.qiu
-05-17
/btbtd
下载:
http://shawl./shawl.qiu_js_class_Dragging_v1.0.htm.7z
演示:
http://shawl./shawl.qiu_js_class_Dragging_v1.0.htm
内容:
1. 类 Dragging 及调用
<!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[ /*-----------------------------------------------------------------------------------*/ *shawl.qiujavascriptDraggingclassv1.0 /*-----------------------------------------------------------------------------------*/ //---------------------------------beginclassDragging()-------------------------------// functionDragging() {//shawl.qiucode //------------------------------------beginpublicvariable //---------------beginabout this.au={} this.au.Subject="shawl.qiujavascriptDraggingclass"; this.au.Version="v1.0"; this.au.Name="shawl.qiu"; this.au.Email="shawl.qiu@"; this.au.Blog="/btbtd"; this.au.CreatedDate="-5-17"; this.au.Update={}; this.au.Update["1"]=""; //---------------endabout this.Set=[]; this.AddElement=fAddElement; this.Count=1; //------------------------------------endpublicvariable //------------------------------------beginprivatevariable varTl=this; //------------------------------------endprivatevariable //------------------------------------beginpublicmethod this.Go=fGo; //------------------------------------endpublicmethod //------------------------------------beginprivatemethod functionfGo() { if(Tl.Set.length==0) { alert("对象集合为空!"); returnfalse; }//endif varDebug=true; for(vari=0,j=Tl.Set.length;i<j;i++) { varObj=Tl.Set[i]; varInherit=Obj["Inherit"]; with(Obj.style) { top=fFindPos(Obj,true)+"px"; left=fFindPos(Obj,false)+"px"; } } for(vari=0,j=Tl.Set.length;i<j;i++) { varObj=Tl.Set[i]; varInherit=Obj["Inherit"]; with(Obj.style) { position="absolute"; } defaultStatus= "Obj.clientTop:"+Obj.offsetTop +"Obj.clientLeft:"+Obj.offsetLeft +"fFindPos(Obj,true):"+fFindPos(Obj,true) +"fFindPos(Obj,false):"+fFindPos(Obj,false) ; if(Debug) { defaultStatus= "typeof(Obj):"+typeof(Obj) +"Inherit:"+Inherit ; }//endif Obj.onmousedown= function() { this.onmousemove= function(e) { if(!e)e=window.event; varParent=this.parentNode; if(this["Inherit"]) { varWidth=this.offsetWidth; varHeight=this.offsetHeight; vareX=e.clientX; vareY=e.clientY; variPTop=fFindPos(Parent,true); variPLeft=fFindPos(Parent,false); variPRight=fFindPos(Parent,false)+Parent.offsetWidth; variPBottom=fFindPos(Parent,true)+Parent.offsetHeight; variRight=this.offsetLeft+this.offsetWidth; variBottom=this.offsetTop+this.offsetHeight; //checktop if(this.offsetTop<iPTop) { this.style.top=iPTop+"px"; return; } //checkleft if(this.offsetLeft<iPLeft) { this.style.left=iPLeft+"px"; return; } //checkright if(iRight>iPRight) { this.style.left=iPRight-this.offsetWidth+"px"; return; } //checkbottom if(iBottom>iPBottom) { this.style.top=iPBottom-this.offsetHeight+"px"; return; } with(this.style) { top=eY-(Height/2)+"px"; left=eX-(Width/2)+"px"; zIndex=9999; }//endwith defaultStatus= "this.offsetLeft:"+this.offsetLeft +"this.offsetTop:"+this.offsetTop +"iPTop:"+iPTop +"iPLeft:"+iPLeft +"iPRight:"+iPRight +"iPBottom:"+iPBottom +"iRight:"+iRight +"iBottom:"+iBottom ; } else { varWidth=this.offsetWidth; varHeight=this.offsetHeight; vareX=e.clientX; vareY=e.clientY; with(this.style) { position="absolute"; top=eY-(Height/2)+"px"; left=eX-(Width/2)+"px"; }//endwith defaultStatus= "this.offsetLeft:"+this.offsetLeft +"this.offsetTop:"+this.offsetTop +"eX:"+eX +"eY:"+eY ; } }//endthis.onmousemove }//endObj.onmousedown Obj.onmouseup= function() { this.style.zIndex=5555; ClearMouseMove(this); }//endObj.onmouseup }//endfor }//endfunctionfGo functionClearMouseMove(Obj) { if(Obj!=null) { Obj.onmousemove=null; } } functionfAddElement(sId,bInherit) { varObj; if(typeof(sId)=="string") { Obj=document.getElementById(sId); if(Obj==null) { alert("无法获得id为:"+sId+"的元素!"); return; }//endif1 } elseif(typeof(sId)=="object") { Obj=sId; } else { alert("无法识别要获取的元素!"); returnfalse; } if(!bInherit)bInherit=false; variIndex=Tl.Set.length; Obj["Inherit"]=bInherit; Tl.Set[iIndex]=Obj; }//endfunctionfAddElement functionfFindPos(oEle,bReturnY) {//shawl.qiuscript if(!oEle) { alert("对象不能为空!"); return; } if(bReturnY) { returnfFindPosY(oEle); } else { returnfFindPosX(oEle); } functionfFindPosX(oEle) {//shawl.qiuscript variLeft=0; if(oEle.offsetParent) { while(true) { iLeft+=oEle.offsetLeft; if(!oEle.offsetParent) { break; }//endif1 oEle=oEle.offsetParent; }//endwhile } elseif(oEle.x) { iLeft+=oEle.x; } returniLeft; }//endfunctionfFindPosX functionfFindPosY(oEle) {//shawl.qiuscript variTop=0; if(oEle.offsetParent) { while(true) { iTop+=oEle.offsetTop; if(!oEle.offsetParent) { break; }//endif1 oEle=oEle.offsetParent; }//endwhile } elseif(oEle.y) { iTop+=oEle.y; } returniTop; }//endfunctionfFindPosX }//endfunctionfFindPos functionfCkBrs() {//shawl.qiuscript switch(navigator.appName) { case'Opera':return2; case'Netscape':return3; default:return1; } }//endfunctionfCkBrs //------------------------------------endprivatemethod }//shawl.qiucode //---------------------------------endclassDragging()---------------------------------// onload= function() { vardragging=newDragging(); //functionfAddElement(sId,bInherit) dragging.AddElement("m1",true); dragging.AddElement("m2",false); dragging.Go(); document.getElementById("subject").innerHTML=dragging.au.Subject+""+dragging.au.Version; dragging=null; } //]]> </script> </head> <body> <divstyle="width:80%;height:500px;border:1pxdottedblue;background-color:white;margin:2%auto;"> <divid="subject"style="text-align:center;font-weight:bold;padding:5px;"> </div>
<divid="m1"style="width:200px;height:80px;border:1pxdottedmistyrose;padding:2px5px;"> inherit............. </div> <divid="m2"style="width:200px;height:80px;border:1pxdottedmistyrose;padding:2px5px;"> noinherit............. </div> </div> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
</body> </html>
