html红div拖拽修改大小,拖动鼠标改变div层的大小宽度-

///Generic Resize by Erik Arvidsson You may use this script as long as this disclaimer is remained. See www.dtek.chalmers.se/~d96erik/dhtml/ for mor info How to use this script! Link the script in the HEAD and create a container (DIV, preferable absolute positioned) and add the class="resizeMe" to it. ///

vartheobject= null;//This gets a value as soon as a resize start

functionresizeObject() {this.el= null;//pointer to the object

this.dir= "";//type of current resize (n, s, e, w, ne, nw, se, sw)

this.grabx= null;//Some useful values

this.graby= null;this.width= null;this.height= null;this.left= null;this.top= null;

}//Find out what kind of resize! Return a string inlcluding the directions

functiongetDirection(el) {varxPos, yPos, offset, dir;

dir= "";

xPos=window.event.offsetX;

yPos=window.event.offsetY;

offset= 8;//The distance from the edge in pixels

if(yPosel.offsetHeight-offset) dir+= "s";if(xPosel.offsetWidth-offset) dir+= "e";returndir;

}functiondoDown() {varel=getReal(event.srcElement,"className","resizeMe");if(el== null) {

theobject= null;return;

}

dir=getDirection(el);if(dir== "")return;

theobject= newresizeObject();

theobject.el=el;

theobject.dir=dir;

theobject.grabx=window.event.clientX;

theobject.graby=window.event.clientY;

theobject.width=el.offsetWidth;

theobject.height=el.offsetHeight;

theobject.left=el.offsetLeft;

theobject.top=el.offsetTop;

window.event.returnValue= false;

window.event.cancelBubble= true;

}functiondoUp() {if(theobject!= null) {

theobject= null;

}

}functiondoMove() {varel, xPos, yPos, str, xMin, yMin;

xMin= 8;//The smallest width possible

yMin= 8;//height

el=getReal(event.srcElement,"className","resizeMe");if(el.className== "resizeMe") {

str=getDirection(el);//Fix the cursor

if(str== "") str= "default";elsestr+= "-resize";

el.style.cursor=str;

}//Dragging starts here

if(theobject!= null) {if(dir.indexOf("e")!= -1)

theobject.el.style.width=Math.max(xMin, theobject.width+window.event.clientX-theobject.grabx)+ "px";if(dir.indexOf("s")!= -1)

theobject.el.style.height=Math.max(yMin, theobject.height+window.event.clientY-theobject.graby)+ "px";if(dir.indexOf("w")!= -1) {

theobject.el.style.left=Math.min(theobject.left+window.event.clientX-theobject.grabx, theobject.left+theobject.width-xMin)+ "px";

theobject.el.style.width=Math.max(xMin, theobject.width-window.event.clientX+theobject.grabx)+ "px";

}if(dir.indexOf("n")!= -1) {

theobject.el.style.top=Math.min(theobject.top+window.event.clientY-theobject.graby, theobject.top+theobject.height-yMin)+ "px";

theobject.el.style.height=Math.max(yMin, theobject.height-window.event.clientY+theobject.graby)+ "px";

}

window.event.returnValue= false;

window.event.cancelBubble= true;

}

}functiongetReal(el, type, value) {

temp=el;while((temp!= null)&&(temp.tagName!= "BODY")) {if(eval("temp." +type)==value) {

el=temp;returnel;

}

temp=temp.parentElement;

}returnel;

}

document.οnmοusedοwn=doDown;

document.οnmοuseup=doUp;

document.οnmοusemοve=doMove;

请在边框处拖动鼠标