js改变盒子大小(上下左右)分析

Posted 2020-10-27 决起而飞

js改变盒子大小

知识点

三个mouse事件：mousedown mousemove mouseup

css的定位和cursor

思路

先解决单边问题
识别范围,得到所选区域 event.
根据距离,判断方向
根据方向进行样式的增加减少,注意top和left的变化
当然还要增加最小的限制

注意

识别改变的四个位置

得到它们的范围

判断改变范围的大小

注意改变top和left的边的时候，注意将盒子的left变为this.offsetLeft-(原来的event.clientX减去现在的event.clinentX);top则变为this.offsetTop-(原来的event.clientY减去现在的event.clinentY)

最后还要限制最小的范围

var container=document.getElementById(‘container‘),
          span=document.getElementById(‘span‘),
          move=document.getElementById(‘move‘),
          wrap=document.getElementById(‘wrap‘)
            divs=container.getElementsByTagName(‘div‘),
            top=divs[0],
            bottom=divs[1],
            left=divs[2],
            right=divs[3];
        //找到位置
        container.onmousedown=function(event){
              var event=event||window.event
              event.preventDefault()
              var mouseDownX=event.clientX
              var mouseDownY=event.clientY
              //得到位置
              var topLocal=this.offsetTop
              var bottomLocal=this.offsetTop+this.offsetHeight
              var leftLocal=this.offsetLeft
              var rightLocal=this.offsetLeft+this.offsetWidth

              var w=this.offsetWidth
              var h=this.offsetHeight
              //识别范围
              var areaT=topLocal+20
              var areaB=bottomLocal-20
              var areaL=leftLocal+20
              var areaR=rightLocal-20
              //判断改变方块的大小方向
              var changeL=event.clientX<areaL
              var changeR=event.clientX>areaR
              var changeT=event.clientY<areaT
              var changeB=event.clientY>areaB
              document.onmousemove=function(event){
                      var event=event||window.event
                      if(changeL){
                           container.style.left=leftLocal-(mouseDownX-event.clientX)+‘px‘
                           container.style.width=(mouseDownX-event.clientX)+w+‘px‘
                      }
                      if(changeR){
                            container.style.width=event.clientX-mouseDownX+w+‘px‘
                      }
                      if(changeT){
                            container.style.top=topLocal-(mouseDownY-event.clientY)+‘px‘
                            container.style.height=mouseDownY-event.clientY+h+‘px‘
                      }
                      if(changeB){
                            container.style.height=event.clientY-mouseDownY+h+‘px‘
                      }
                      if(parseInt(container.style.width)<150){
                              container.style.width=150+‘px‘
                              document.onmousemove=null
                      }
                      if(parseInt(container.style.height)<150){
                              container.style.height=150+‘px‘
                              document.onmousemove=null
                      }
              }
              document.onmouseup=function(){
                      document.onmousemove=null
                      document.onmouseup=null
              }
        }