javascript拖拽时改变盒子的尺寸（宽高）

本博文纯属个人理解、可能与专业知识有出入！！！！！

首先拖拽行为一共触发了三个事件：

鼠标按下—onmousedown
鼠标移动—onmousemove
鼠标弹起—onmouseup

---

二、事件发生—–>计算事件触发时各种数据的数值和变化

获取对象

var Box=document.getElementById('box');

鼠标点下触发事件：

Box.onmousedown=function(ev){
   }；

立刻获取点击当前的数据：

var iEvent=ev || event; 
var disX=iEvent.clientX;
var disY=iEvent.clientY;
var disW=Box.offsetWidth;
var disH=Box.offsetHeight;
var OFFLeft=Box.offsetLeft;
var OOFTop=Box.offsetTop;

设置感应区为20px；并给边框添加易于识辨的样式；
判断拖动时的数据变化：

if(iEvent.clientX>Box.offsetLeft+Box.offsetWidth-20){
    Box.style.cursor='w-resize';
    box.style.borderRight='20px solid coral';
    b='right';
};
if(iEvent.clientX<Box.offsetLeft+20){
    Box.style.cursor='w-resize';                        
    box.style.borderLeft='20px solid #de5145';
    b='left';
}
if(iEvent.clientY<Box.offsetTop+20){
    Box.style.cursor='s-resize';
    box.style.borderTop='20px solid #f05b4e';
    b='top';
}
if(iEvent.clientY>Box.offsetTop+Box.offsetHeight-20)