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 ?????????????} ???????}
js改变盒子大小(上下左右)分析
原文地址：https://www.cnblogs.com/iDouble/p/8584476.html