내용 드래그 확대 축소

    
    
    



    
    
    

          ,        ,        ,        ,        ,        ,      
          ,        ,        ,        ,        ,        ,      
    
    
  


    box.οnmοusedοwn=function(e){
        var ev=e||event;
        var iTarget=ev.srcElement||ev.target;

        if(iTarget.className=='boxTitle'){
            var l=ev.clientX-iTarget.parentNode.offsetLeft;
            var t=ev.clientY-iTarget.parentNode.offsetTop;

            document.οnmοusemοve=function(e){
                var ev =e ||event;

                var needLeft=ev.clientX-l;
                var needTop=ev.clientY-t;
                var maxL=innerWidth-box.offsetWidth;
                var maxT=innerHeight-box.offsetHeight;

                needTop<0?needTop=0:needTop;
                needLeft<0?needLeft=0:needLeft;
                needLeft>maxL?needLeft=maxL:needLeft;
                needTop>maxT?needTop=maxT:needTop;

                iTarget.parentNode.style.left=needLeft +'px';
                iTarget.parentNode.style.top=needTop +'px'
            };

            document.οnmοuseup=function(){
              document.οnmοusemοve=document.οnmοuseup=null;
            };

            return false;
        }

        if(iTarget.className=='drag'){
            var l=ev.clientX-iTarget.offsetLeft;
            var t=ev.clientY-iTarget.offsetTop;

            document.οnmοusemοve=function(e){
                var ev=e||event;

                var needL=ev.clientX-l;
                var needT=ev.clientY-t;
                needL<80?needL=80:needL;
                needT<80?needT=80:needT;


                iTarget.style.left=needL+'px';
                iTarget.style.top=needT+'px';

                box.style.width=iTarget.offsetLeft+iTarget.offsetWidth+'px';
                box.style.height=iTarget.offsetTop+iTarget.offsetHeight+'px';
            };

            document.οnmοuseup=function(){
                document.οnmοusemοve=document.οnmοuseup=null;
            };
            return false;
        }
    }