这篇文章主要介绍了Vuejs通过拖动改变元素宽度实现自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
需求:
原理:
拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。
html部分代码:
- 西瓜
- 备注2
- test
- 芒果
- 备注
- test
js部分代码:
style部分:
以上就是Vuejs通过拖动改变元素宽度实现自适应的详细内容,更多请关注0133技术站其它相关文章!