利用JavaScript实现拖拽改变元素大小

大致介绍

拖拽改变元素大小是在模拟拖拽上增加了一些功能

拖拽改变元素大小原理

首先这个方块得知道我们想要改变这个它的大小，所以我给它设定一个范围，当点击这个范围时表明我们想要改变它的大小

当我们点击方块的这些红色区域时，方快就知道我们想要改变它的大小

代码实现：

// 获取event对象，兼容性写法
     var ev = ev || event;
     // 鼠标按下时的位置
     var mouseDownX = ev.clientX;
     var mouseDownY = ev.clientY;
     // 方块上下左右四个边的位置和方块的长宽
     var T0 = this.offsetTop;
     var B0 = this.offsetTop + this.offsetHeight;
     var L0 = this.offsetLeft;
     var R0 = this.offsetLeft + this.offsetWidth;
     var W = this.offsetWidth;
     var H = this.offsetHeight;
     // 设置方块的识别范围
     var areaT = T0 + 10;
     var areaB = B0 - 10;
     var areaL = L0 + 10;
     var areaR = R0 - 10;

其中areaT、areaB、areaL、areaR就是红色的区域

接下来方块知道我们想要改变它的大小了，但是要怎么改变，朝哪种方向改变大小。所以要判断改变大小的方向

代码实现：

// 判断改变方块的大小的方向
     // 左
     var changeL = mouseDownX < areaL;
     // 右
     var changeR = mouseDownX > areaR;
     // 上
     var changeT = mouseDownY < areaT;
     // 下
     var changeB = mouseDownY > areaB;

接下来就是最重要的改变样式了

代码实现：

//根据改变方块大小的方向不同进行大小的改变
       // 左
       if(changeL){
         oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
         oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
       }
       // 右
       if(changeR){
         oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
       }
       // 上
       if(changeT){
         oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
         oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
       }
       // 下
       if(changeB){
         oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
       }

注意：在改变左侧和上侧时要同时修改方块的位置，不然会出现拖左侧边而右侧边位置扩大的现象（拖动上侧边下侧边位置变大）

代码优化

未优化前的代码：

var oDiv = document.getElementById('div1');
   oDiv.onmousedown = function(ev){
     // 获取event对象，兼容性写法
     var ev = ev || event;
     // 鼠标按下时的位置
     var mouseDownX = ev.clientX;
     var mouseDownY = ev.clientY;
     // 方块上下左右四个边的位置和方块的长宽
     var T0 = this.offsetTop;
     var B0 = this.offsetTop + this.offsetHeight;
     var L0 = this.offsetLeft;
     var R0 = this.offsetLeft + this.offsetWidth;
     var W = this.offsetWidth;
     var H = this.offsetHeight;
     // 设置方块的识别范围
     var areaT = T0 + 10;
     var areaB = B0 - 10;
     var areaL = L0 + 10;
     var areaR = R0 - 10;
     // 判断改变方块的大小的方向
     // 左
     var changeL = mouseDownX < areaL;
     // 右
     var changeR = mouseDownX > areaR;
     // 上
     var changeT = mouseDownY < areaT;
     // 下
     var changeB = mouseDownY > areaB;
     oDiv.onmousemove = function(ev){
       var ev = ev || event;
       // 鼠标移动时的鼠标位置
       var mouseMoveX = ev.clientX;
       var mouseMoveY = ev.clientY;
       //根据改变方块大小的方向不同进行大小的改变
       // 左
       if(changeL){
         oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
         oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
       }
       // 右
       if(changeR){
         oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
       }
       // 上
       if(changeT){
         oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
         oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
       }
       // 下
       if(changeB){
         oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
       }
       // 限定范围
       if(parseInt(oDiv.style.width) < 50){
         oDiv.style.width = 50 + 'px';
       }
       if(parseInt(oDiv.style.height) < 50){
         oDiv.style.height = 50 + 'px';
       }
     }
     oDiv.onmouseup = function(){
       oDiv.onmousemove = null;
     }
   }

这段代码现在主要有两个问题：

1、当鼠标移动过快移出方块时，就不能够继续改变元素的大小了

解决方案：把onmousemove事件和onmouseup事件绑定到document对象上

2、当方块中有文字时，拖拽改变方块大小时会触发浏览器默认的原生拖放行为

解决方案：1、阻止浏览器的默认行为（IE8浏览器除外）

  在onmousedown中添加语句 return false

2、设置全局捕获（IE8）

 在onmousedown中设置全局捕获

  在onmouseup中取消全局捕获

优化后的代码：

<div id="div1">adfadsf</div>
 <script type="text/javascript">
   var oDiv = document.getElementById('div1');
   oDiv.onmousedown = function(ev){
     // 获取event对象，兼容性写法
     var ev = ev || event;
     // 鼠标按下时的位置
     var mouseDownX = ev.clientX;
     var mouseDownY = ev.clientY;
     // 方块上下左右四个边的位置和方块的长宽
     var T0 = this.offsetTop;
     var B0 = this.offsetTop + this.offsetHeight;
     var L0 = this.offsetLeft;
     var R0 = this.offsetLeft + this.offsetWidth;
     var W = this.offsetWidth;
     var H = this.offsetHeight;
     // 设置方块的识别范围
     var areaT = T0 + 10;
     var areaB = B0 - 10;
     var areaL = L0 + 10;
     var areaR = R0 - 10;
     // 判断改变方块的大小的方向
     // 左
     var changeL = mouseDownX < areaL;
     // 右
     var changeR = mouseDownX > areaR;
     // 上
     var changeT = mouseDownY < areaT;
     // 下
     var changeB = mouseDownY > areaB;
     // IE8 取消默认行为-设置全局捕获
     if(oDiv.setCapture){
       oDiv.setCapture();
     }
     document.onmousemove = function(ev){
       var ev = ev || event;
       // 鼠标移动时的鼠标位置
       var mouseMoveX = ev.clientX;
       var mouseMoveY = ev.clientY;
       //根据改变方块大小的方向不同进行大小的改变
       // 左
       if(changeL){
         oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
         oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
       }
       // 右
       if(changeR){
         oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
       }
       // 上
       if(changeT){
         oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
         oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
       }
       // 下
       if(changeB){
         oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
       }
       // 限定范围
       if(parseInt(oDiv.style.width) < 50){
         oDiv.style.width = 50 + 'px';
       }
       if(parseInt(oDiv.style.height) < 50){
         oDiv.style.height = 50 + 'px';
       }
     }
     document.onmouseup = function(){
       document.onmousemove = null;
       // 释放全局捕获
       if(oDiv.releaseCapture){
         oDiv.releaseCapture();
       }
     }
     return false;
   }

来源：http://www.cnblogs.com/qqandfqr/p/6151483.html