html 拖拽 改变布局大小,利用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){