js组件-可改变大小的div
在实现了可拖动div的组件后,又联想到拖拽可改变div大小的需求,话不多说先看效果,再来慢慢分析
可所以改变大小的div
组件分析
- 给目标div增加四周的边框,并且在边框的八个方向增加拖拽点,分别用方向的首字母组合代替
- 当鼠标落在八个点上时,鼠标形状变成向各个方向拖拽的形状
- 当鼠标按下并拖拽时,计算div新的位置和大小,并改变div
逻辑挺简单的,我们一步步实现
对目标div增加边框
增加边框的逻辑很简单,就是增加一个比目标div大点的div,然后设置边框。代码如下
生成边框的逻辑
最新评论