< html > < head > < style > ... .drag {...}{ CURSOR: move; POSITION: relative; border-right: black 1px dashed; border-top: black 1px dashed; border-left: black 1px dashed; border-bottom: black 1px dashed; } </ style > </ head > < body > < form > < script type ="text/javascript" > ... var dragapproved=false;var ismove=true;var z,x,y;var imgx,imgy;var imgw,imgh;var issave=0;var ismanager=false;var moresize=0;var copyl,copyt;var oldw,oldh;function move()...{ if (event.button==1&&dragapproved) ...{ Scoling(); if(ismove) ...{ copyl=z.offsetLeft; copyt=getElementPos(z.id).y; maint=getElementPos(z.parentElement.id).y; mainh=z.parentElement.clientHeight; if(document.body.clientWidth>915) ...{ moresize=(document.body.clientWidth-915)/2; } else ...{ moresize=0; } var aa=copyl-moresize; var noww=z.style.pixelLeft; var nowh=z.style.pixelTop; oldw=noww; z.style.pixelLeft=temp1+event.clientX-x; z.style.pixelTop=temp2+event.clientY-y; } else ...{ if(z.width>20&&z.height>20) ...{ if(z.width<500&&z.height<450) ...{ if(event.shiftKey ) ...{ if(x-event.clientX>0) ...{ z.width=imgw-(x-event.clientX); z.height=imgh*z.width/imgw; } else ...{ z.width=imgw+(event.clientX-x); z.height=imgh*z.width/imgw; } } else ...{ if(x-event.clientX>0) ...{ z.width=imgw-(x-event.clientX); } else ...{ z.width=imgw+(event.clientX-x); } if(y-event.clientY>0) ...{ z.height=imgh-(y-event.clientY); } else ...{ z.height=imgh+(event.clientY-y); } } } else ...{ z.width=470; z.height=400; } } else ...{ z.width=25; z.height=25; } } return false; }}function Scoling()...{ if((x<=imgx&&x>imgx-10)&&(imgy<=imgh&&imgy>imgh-10)) ...{ z.style.cursor="nw-resize"; ismove=false; } else ...{ z.style.cursor="move"; ismove=true; }}var i=0;document.body.onmousemove=function imgmousemove()...{ if (event.srcElement.className=="drag") ...{ var mimgw,mimgh,mx,xy; z=event.srcElement; mimgw=z.width; mimgh=z.height; mx=event.offsetX; my=event.offsetY; if(mx>imgw-10&&my>mimgh-10) ...{ z.style.cursor="nw-resize"; ismove=false; } else ...{ z.style.cursor="move"; ismove=true; } }}function drags()...{ if (event.srcElement.className=="drag") ...{ dragapproved=true; z=event.srcElement; imgx=getElementPos(event.srcElement.id).x+z.width; imgy=event.offsetY; imgw=z.width; imgh=z.height; temp1=z.style.pixelLeft; temp2=z.style.pixelTop; x=event.clientX; y=event.clientY; event.srcElement.onmousemove=move; }}///移动坐标function stop()...{if(z)...{z.style.cursor="move";}ismove=true; dragapproved=false;} function getElementPos(elementId) ...{ var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof var el = document.getElementById(elementId); if(el==null) ...{ return false; } if(el.parentNode === null || el.style.display == 'none') ...{ return false; } var parent = null; var pos = []; var box; if(el.getBoundingClientRect) //IE ...{ box = el.getBoundingClientRect(); var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); return ...{x:box.left + scrollLeft, y:box.top + scrollTop}; } else if(document.getBoxObjectFor) // gecko ...{ box = document.getBoxObjectFor(el); var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0; var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0; pos = [box.x - borderLeft, box.y - borderTop]; } else // safari & opera ...{ pos = [el.offsetLeft, el.offsetTop]; parent = el.offsetParent; if (parent != el) ...{ while (parent) ...{ pos[0] += parent.offsetLeft; pos[1] += parent.offsetTop; parent = parent.offsetParent; } } if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) ...{ pos[0] -= document.body.offsetLeft; pos[1] -= document.body.offsetTop; } } if (el.parentNode) ...{ parent = el.parentNode; } else ...{ parent = null; } while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') ...{ // account for any scrolled ancestors pos[0] -= parent.scrollLeft; pos[1] -= parent.scrollTop; if (parent.parentNode) ...{ parent = parent.parentNode; } else ...{ parent = null; } } return ...{x:pos[0], y:pos[1]};} </ script > < div id ="positiveDiv" > < img alt ="" class ="drag" id ="positiveDragImg" runat ="server" src ="127157.gif" onmousedown ="drags();" onmouseup ="stop();" /> </ div > </ form > </ body > </ html >