阅读 75

div宽度设置不起作用(设置div的宽度和高度)

在实现了可拖动div的组件后,又联想到拖拽可改变div大小的需求,话不多说先看效果,再来慢慢分析

可所以改变大小的div

组件分析

  • 给目标div增加四周的边框,并且在边框的八个方向增加拖拽点,分别用方向的首字母组合代替
  • 当鼠标落在八个点上时,鼠标形状变成向各个方向拖拽的形状
  • 当鼠标按下并拖拽时,计算div新的位置和大小,并改变div

逻辑挺简单的,我们一步步实现

对目标div增加边框

增加边框的逻辑很简单,就是增加一个比目标div大点的div,然后设置边框。代码如下

生成边框的逻辑

对目标div增加拖动点

对于八个点的信息,我定义了个对象数组分表代表,比如,东面的点我这样表示

class:e用于标记这个点的方位为东面,right、top和transform是用来定位点的具体位置,cursor用来设定光标形状(每个方向的光标是不同的),其他方位和这个类似,文末会附上代码

然后遍历这八个对象,分别生成点,并增加鼠标事件监听

生成点的逻辑

这八个点的拖动处理逻辑有所不同,所以单独写了个函数,函数返回每个方向的处理函数,函数名称和点的class一样,这样就可以直接根据class获取到处理函数,并添加到鼠标监听事件中。这个函数这样定义的:

拖拽函数对象

将生成的边框和点半绑定到目标div

边框和点都有了,接下来就简单了,直接添加到目标div就行(因为生成的都是绝对定位,所以在目标div内部也不影响)

整个组件的结构如下,内容有点多就不贴代码了,感兴趣的可以私信我。

组件结构

使用就更简单了,和之前一样

文章分类
百科问答
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐