<html>
    <head>
    <head>
        <title></title>
        <meta content="text/html; charset=gb2312" http-equiv="Content-Type">
        <style>
       
        #testDiv {  
position:absolute;
            border: 2px  blue solid; 
        }
          
</style>        <SCRIPT language=javascript>
        var theobject = null;
        
        function resizeObject() {
            this.el = null; 
            this.dir = ""; 
            this.grabx = null; 
            this.graby = null;
            this.width = null;
            this.height = null;
            this.left = null;
            this.top = null;
        }
        
        function getDirection(el) {
            var xPos, yPos, offset, dir;
            dir = "";
        
            xPos = window.event.offsetX;
            yPos = window.event.offsetY;
        
            offset = 8; 
        
            if (yPos < offset)
                dir += "n";
            else if (yPos > el.offsetHeight - offset)
                dir += "s";
            if (xPos < offset)
                dir += "w";
            else if (xPos > el.offsetWidth - offset)
                dir += "e";
        
            return dir;
        }
        
        function doDown() {
            var el = getReal(event.srcElement, "className", "resizeMe");
        
            if (el == null) {
                theobject = null;
                return;
            }
        
            dir = getDirection(el);
            if (dir == "")
                return;
        
            theobject = new resizeObject();
        
            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;
        }
        
        function doUp() {
            if (theobject != null) {
                theobject = null;
            }
        }
        
        function doMove() {
            var el, xPos, yPos, str, xMin, yMin;
            xMin = 8; 
            yMin = 8; 
        
            el = getReal(event.srcElement, "className", "resizeMe");
        
            if (el.className == "resizeMe") {
                str = getDirection(el);
                
                if (str == "")
                    str = "default";
                else
                    str += "-resize";
                el.style.cursor = str;
            }
            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;
down = false;
            }
        }
        
        function getReal(el, type, value) {
            temp = el;
            while ((temp != null) && (temp.tagName != "BODY")) {
                if (eval("temp." + type) == value) {
                    el = temp;
                    return el;
                }
                temp = temp.parentElement;
            }
            return el;
        }
        
        document.onmousedown = doDown;
        document.onmouseup = doUp;
        document.onmousemove = doMove;

var x,y,z,down=false,obj   
function init(){
obj=event.srcElement     //事件触发对象
obj.setCapture()            //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex          //获取对象的z轴坐标值
//设置对象的z轴坐标值为100,确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX   //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY   //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true         //布尔值,判断鼠标是否已按下,true为按下,false为未按下
}
function moveit(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
 if(down&&event.srcElement==obj){
   with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/
        posLeft=document.body.scrollLeft+event.x-x
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
        posTop=document.body.scrollTop+event.y-y
   }
 }
}
function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
down=false 
obj.style.zIndex=z       //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉
}        </SCRIPT>
    </head>    <body>
<div style="background-color:#CCC; width:300px; height:300px;">
        <div class="resizeMe" id="testDiv" onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="wid">
            <div id="innerNice">
                <p align="center">
                </p>
                <p align="center">
                    请在边框处拖动鼠标
                <p>
                </p>
                
                
            </div>
        </div>
        </div>
    </body>
</html>