设置div的宽度和高度 div宽度设置不起作用
在实现了可拖动div的组件后，又联想到拖拽可改变div大小的需求，话不多说先看效果，再来慢慢分析
文章插图
文章插图
可所以改变大小的div
组件分析
- 给目标div增加四周的边框，并且在边框的八个方向增加拖拽点，分别用方向的首字母组合代替
- 当鼠标落在八个点上时，鼠标形状变成向各个方向拖拽的形状
- 当鼠标按下并拖拽时，计算div新的位置和大小，并改变div
对目标div增加边框增加边框的逻辑很简单，就是增加一个比目标div大点的div，然后设置边框 。代码如下
文章插图
文章插图
生成边框的逻辑
对目标div增加拖动点对于八个点的信息，我定义了个对象数组分表代表，比如，东面的点我这样表示
文章插图
文章插图
东
class：e用于标记这个点的方位为东面，right、top和transform是用来定位点的具体位置，cursor用来设定光标形状（每个方向的光标是不同的），其他方位和这个类似，文末会附上代码
然后遍历这八个对象，分别生成点，并增加鼠标事件监听
文章插图
文章插图
生成点的逻辑
这八个点的拖动处理逻辑有所不同，所以单独写了个函数，函数返回每个方向的处理函数，函数名称和点的class一样，这样就可以直接根据class获取到处理函数，并添加到鼠标监听事件中 。这个函数这样定义的：
文章插图
文章插图
拖拽函数对象
将生成的边框和点半绑定到目标div边框和点都有了，接下来就简单了，直接添加到目标div就行（因为生成的都是绝对定位，所以在目标div内部也不影响）
整个组件的结构如下，内容有点多就不贴代码了，感兴趣的可以私信我 。
文章插图
文章插图
组件结构
使用就更简单了，和之前一样
推荐阅读
- ns十大最耐玩的游戏 nds火焰纹章有几部
- tdcs列车调度指挥系统操作 铁路调度指挥系统的功能
- 防火墙的基本配置方法 深信服防火墙配置详细步骤
- 粘贴到筛选后的表格的方法 excel表格筛选后怎么复制粘贴数据
- 抛弃学业离别家乡的伤感句子
- 菠萝蜜的胶怎么洗在刀上
- 免试入学的大学比较差吗
- 手机怎样设置数字密码
- 严重生锈的螺丝如何拧开
- 商品的特性是什么