vue拖拽改变盒子大小,vue可以拖动的布局
这篇文章主要为大家详细介绍了某视频剪辑软件实现拖动调整左右两侧容器大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现拖动调整左右两侧容器大小的具体代码，供大家参考，具体内容如下
页面布局
模板
a-layout class= width-auto id= product
div class=内容
div id=left class=left
左侧
/div
div id= line class= resize-line /div
div id=right class=right
右侧
/div
/div
/a-布局
/模板
拖拽方法
drapContent() {
//获取左边区域的宽度
左=文档。getelementbyid( left )；
//获取移动区域的宽度
让行=文档。getelementbyid( line )；
//获取右边区域的宽度
右对齐=文档。getelementbyid(“right”)；
//移动区域鼠标移入事件
line.onmousedown=函数(e) {
//移动的距离
let lineLeft=e.clientX
文档。onmousemove=function(e){
//移动的位置（侧边栏的宽度移动的宽度)
设diff val=276(e . clientx-line left)；
//移动区间的范围[276, 740]
if(diffVal=276 diffVal=840) {
//移动区域距离左边的距离
线。风格。left=diff val px
//左边缩放的宽度
向左。风格。width=diff val px
//右边改变后的宽度（改变后的宽度要加上移动区域的宽度)
没错。风格。宽度=文档。getelementbyid(“产品”).客户端宽度-(差异值16)像素；
}
}
document.onmouseup=function() {
document.onmousemove=null
document.onmouseup=null
}
}
}
在某视频剪辑软件里面使用记得将方法在安装好的中调用一下：
样式。内容{
显示器：flex
宽度：100%;
身高：100%;
}。左侧{
宽度：260像素
身高：100%;
}。调整线条大小{
/*鼠标移入显示左右箭头*/
光标：ew-resize；
宽度：16px
最小宽度：16px
最大宽度：16px
背景色：透明；
}。右{
宽度：calc(100%-276 px)；
最大宽度：calc(100%-276 px)；
用户选择：无；
}。蚂蚁布局{
身高：calc(100 VH-181 px)；
}
：深(。置顶搜索蚂蚁形式项目标签){
最小宽度：72px
}
：深(。ant-layout-sider) {
弹性：0 0 100%;
最大宽度：100%!重要；
最小宽度：260像素！重要；
宽度：100%!重要；
用户选择：无；
}。宽度-自动。树形布局侧{
身高：calc(100 VH-181 px)；
溢出-x:隐藏；
溢出-y:自动；
左填充：8px！重要；
填充-右侧：0!重要；
}。宽度-自动李李。蚂蚁树标题{
宽度：100%!重要；
}
：深(。蚂蚁树。蚂蚁树块节点李。蚂蚁树节点内容包装){
溢出：隐藏；
文本溢出：省略号；
断字：断字；
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。