jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
本文实例讲述了jQuery实现的鼠标拖动画矩形框。分享给大家供大家参考,具体如下:
鼠标拖动画矩形 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0} html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical} #confirmingAppraisal{ position:relative; left:0; top:0; margin:0auto; padding:0; width:800px; min-height:800px; overflow:auto; height:1000px; background-color:#e9e9e9; } .dashed-box{position:absolute;z-index:9997;border:1pxdashedred;width:0px;height:0px;left:0px;top:0px;overflow:hidden;} #moving_box{background-color:#0A90DB;} .question-box{ position:absolute; z-index:9998; /*background:red;*/ /*oldersafari/Chromebrowsers*/ -webkit-opacity:0.8; /*NetscapeandOlderthanFirefox0.9*/ -moz-opacity:0.8; /*Safari1.x(preWebKit!)老式khtml内核的Safari浏览器*/ -khtml-opacity:0.8; /*IE9+etc...modernbrowsers*/ opacity:.8; /*IE4-9*/ filter:alpha(opacity=80); /*ThisworksinIE8&9too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80); } .question-border{z-index:9999;border:2pxdashedred;overflow:hidden;} .del-box{ width:17px; height:17px; float:right; position:relative; margin-top:1px; margin-right:1px; z-index:99999999999; background:url(del.png); } window.onload=function(){ functionstopDefault(e){ if(e&&e.preventDefault) e.preventDefault(); else window.event.returnValue=false; returnfalse; } functionoBox(){ varwId="w"; varindex=0; vartarget=null; varstartX=0,startY=0; varflag=false; varstartL=0,startT=0,boxHeight=0,boxWidth=0; varboxObj=document.getElementById("confirmingAppraisal"); varframe=$("#confirmingAppraisal"); varreferenceSize={ "pos":frame.offset(), "width":frame.outerWidth(), "height":frame.outerHeight() } varnewMarkPos={ "left":startL,////按下时鼠标距离的左边的距离 "top":startT////按下时鼠标距离的上边的距离 } //鼠标点击 boxObj.onmousedown=function(e){ flag=true; vare=window.event||e; target=e.target||e.srcElement;//获取document对象的引用 //e.pageY,e.pageX兼容 if(target.src){ stopDefault(e) } varscrollTop=boxObj.scrollTop; varscrollLeft=boxObj.scrollLeft; varePageX=e.clientX+scrollLeft; varePageY=e.clientY+scrollTop; //按下时鼠标距离页面的距离 startX=ePageX; startY=ePageY; //按下时鼠标距离的左边和上边的距离 startL=startX-referenceSize.pos.left; startT=startY-referenceSize.pos.top; index++; //如果鼠标在box上被按下 if(target.className.match(/del-box/i)){ //允许拖动 flag=false; //设置当前box的id为moving_box varmovingBox=document.getElementById("moving_box") if(movingBox!==null){ movingBox.removeAttribute("id"); } target.id="moving_box"; removeBox(target); }else{ vardiv=document.createElement("div"); div.id=wId+index; div.className="dashed-box"; boxObj.appendChild(div); div=null; } } //鼠标离开 boxObj.onmouseup=function(e){ vare=window.event||e; if(boxWidth>=1||boxHeight>=1){ boxObj.removeChild(dragBox(wId+index)); index++; vardiv=document.createElement("div"); varspanObj=document.createElement("span"); spanObj.className='del-box'; div.appendChild(spanObj); div.className="question-boxquestion-border"; div.style.left=newMarkPos.left+"px"; div.style.top=newMarkPos.top+"px"; div.style.width=boxWidth+"px"; div.style.height=boxHeight+"px"; boxObj.appendChild(div); div=null; boxWidth=0; boxHeight=0; }else{ if(flag){ boxObj.removeChild(dragBox(wId+index)); } } flag=false; } //鼠标移动 boxObj.onmousemove=function(e){ vare=window.event||e; stopDefault(e) if(flag){ varscrollTop=boxObj.scrollTop; varscrollLeft=boxObj.scrollLeft; varePX=e.clientX+scrollLeft; varePY=e.clientY+scrollTop; vardisW=ePX-startX; vardisH=ePY-startY; varL=startL+disW; varT=startT+disH; if(disW>0){ if(L>=0){ boxWidth=disW } newMarkPos.left=startL; }else{ if(L<=0){ L=0; boxWidth=startL; } boxWidth=(startL-L); newMarkPos.left=L; } if(disH>0){ if(T>=0){ boxHeight=disH } newMarkPos.top=startT; }else{ if(T<=0){ T=0; boxHeight=startT; } boxHeight=(startT-T) newMarkPos.top=T; } dragBox(wId+index).style.left=newMarkPos.left+"px"; dragBox(wId+index).style.top=newMarkPos.top+"px"; dragBox(wId+index).style.width=Math.abs(boxWidth)+"px"; dragBox(wId+index).style.height=Math.abs(boxHeight)+"px"; stopDefault(e) } } vardragBox=function(id){ returndocument.getElementById(id); } }; oBox(); functionremoveBox(obj){ if(obj){ varconfirmingAppraisal=document.getElementById('confirmingAppraisal'); if(obj.className=='del-box'){ varobjId=document.getElementById(obj.id); confirmingAppraisal.removeChild(objId.parentNode); }else{ alert(123) } } }; }