改变大小控件

小小的封装控件（可改变大小，用法同拖动控件一样)
canResize（可拖动）,rlayernum(要改变大小的父元件层数)

<!--
Author:        Kw.Tsou
Date:        2005/11/26
Content:    为页面上的元件提供可改变大小的功能
UseMark:    在body上behavior此物件，然后在需要改变大小的物件上设置canResize="1"属性即可
-->
<PUBLIC:COMPONENT>
    <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="resize_eDown()" />
    <PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="resize_eUp()" />
    <PUBLIC:ATTACH EVENT="onmousemove" ONEVENT="resize_eMove()" />
    <PUBLIC:ATTACH EVENT="onscroll" ONEVENT="resize_eUp()" />
    <PUBLIC:EVENT ID="resizeevent"  NAME="ontagresize"/>
</PUBLIC:COMPONENT>
<SCRIPT Language="JavaScript">

    var isse = false;
    var isw = false;
    var iss = false;
    var OFFSET = 10;
    var MINWIDTH = 50;
    var MINHEIGHT = 20;
    var resizeObj = null;        //虚线框物件
    
    function setResizeObj(el){
        if(el!=null){
            resizeObj = el;
            resizeObj.isLock = true;
        }
    }
    
    function releaseResizeObj(){
        if(resizeObj!=null){
            resizeObj.isLock = false;
            var evt = createEventObject();
            evt.src = resizeObj;
            try { resizeevent.fire(evt); } catch(e) {};
            resizeObj = null;
            
        }
    }
    
    function resize_eMove()
    {
        var e = window.event;
        var el = e.srcElement;
        
        if(resizeObj!=null&&window.event.button=="1"){
            var ex = e.clientX;
            var ey = e.clientY;
            var w = resizeObj.offsetWidth + ex - resizeObj.xx;
            var h = resizeObj.offsetHeight + ey - resizeObj.yy ;
            resizeObj.xx = ex;
            resizeObj.yy = ey;
            if(w<MINWIDTH)w=MINWIDTH;
            if(h<MINHEIGHT)h=MINHEIGHT;
            if(isse||isw)
                resizeObj.style.width = w;
            if(isse||iss)
                resizeObj.style.height = h;
            window.event.returnValue = false;
            window.event.cancelBubble = true;
            return false;
                
        }
        
        
        else{
            if(el.canResize=="1"){
                if(el!=null){
                    if(!el.oldcursor){
                        el.oldcursor = el.runtimeStyle.cursor||el.style.cursor;
                        if(!el.oldcursor)
                            el.oldcursor = "default";
                    }
                    
                    var width = el.offsetWidth + el.scrollLeft;
                    var height = el.offsetHeight + el.scrollTop;
                    var offsetX = e.offsetX;
                    var offsetY = e.offsetY;
                    if((width-OFFSET<=offsetX&&offsetX<=width+OFFSET)&&(height-OFFSET<=offsetY&&offsetY<=height+OFFSET)){
                        el.runtimeStyle.cursor = "se-resize";
                        isse = true;
                        isw = false;
                        iss = false;
                    }
                    else if(width-OFFSET<=offsetX&&offsetX<=width+OFFSET){
                        el.runtimeStyle.cursor = "w-resize";
                        isse = false;
                        isw = true;
                        iss = false;
                    }
                    else if(height-OFFSET<=offsetY&&offsetY<=height+OFFSET){
                        el.runtimeStyle.cursor = "s-resize";
                        isse = false;
                        isw = false;
                        iss = true;
                    }
                    else{
                        el.runtimeStyle.cursor = el.oldcursor;
                        isse = false;
                        isw = false;
                        iss = false;
                    }
                    window.event.returnValue = false;
                    window.event.cancelBubble = true;
                }
                
            }

        }
    }
    
    //取得移动对象(如只能拖动标题栏进行移动)
    function getOpreateElement(el){
        var ret = el;
        var layernum = 0;
        if(el.rlayernum)
            layernum = parseInt(el.rlayernum);
        for(var i=0;i<layernum;i++)
        {
            ret = ret.parentElement;
        }
        return ret;
    }


    
    function resize_eDown()
    {
        var e = window.event;
        var el = e.srcElement;
        if((el.canResize=="1")&&(isse||isw||iss)){
            el = getOpreateElement(el);
            if(el!=null){        
                setResizeObj(el);
                resizeObj.xx = e.clientX;
                resizeObj.yy = e.clientY;
                window.status = "按住鼠标左键拖动可改变大小";
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }
        }
    }

    function resize_eUp()
    {
        releaseResizeObj();
        window.status = "Done";
    }


</SCRIPT>

<html>
<head>
<title>什么都可以拖动，也可改变大小</title>
<style>
body,div,td,font{}{font:menu;}
div,td{}{text-align:center}
</style>
</head>
<body style="margin:0px">
<div ontagmove="window.status=' left:' + window.event.src.offsetLeft + ' top:' + window.event.src.offsetTop" style="margin:3px;position:absolute;overflow:hidden;behavior:url(BlogMoveAble.htc) url(BlogResizeAble.htc);border:1px solid gray;width:90%;height:90%;background-color:#efefef">
    <div canResize="1"  canMove = "1" style="background-color:gray;border:1px solid red;cursor:move;top:20px;left:20px;position:absolute;width:100px;height:100px;">
        这是一个div（移动右边和下面，可改变大小哟）
    </div>
    <div  canResize="1"  style="background-color:#e1e1e1;border:1px solid blue;;top:120px;left:120px;position:absolute;width:180px;height:120px;">
        <div style="height:30px;border:1px solid white;background-color:white;color:black;cursor:move" canMove="1" layernum="1">只有标题可以拖动</div>
        这是一个div（可改变大小哟）
    </div>
    <table canResize="1" border="1" bordercolor="green" style="width:50%;height:50%;position:absolute" ID="Table1">
        <tr>
            <td canMove="1" layernum="3" colspan="2" style="cursor:move;background-color:blue;color:white">这是表格的标题行(也可改变大小)</td>
        </tr>
        <tr>
            <td>1</td>
            <td canResize="1" rlayernum="3">2</td>
        </tr>
        <tr>
            <td canResize="1" rlayernum="3">3</td>
            <td canResize="1" rlayernum="3">4</td>
        </tr>
    </table>
</div>
</body>
</html>

预览
testresize.htm

下载
resizeble.rar