JS拖拽-改变高度

JS拖拽-改变高度

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

// 获取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中取消全局捕获　

=======================================================================================

以下是优化的最终代码

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;
}

转载网络