改变大小控件

小小的封装控件（可改变大小，用法同拖动控件一样)
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

转载于:https://www.cnblogs.com/cheatlove/articles/405419.html