好资源导航 » 文章资讯 » Vuejs通过拖动改变元素宽度实现自适应

Vuejs通过拖动改变元素宽度实现自适应

2023-07-17 09:34:04 85

需求：

原理：

拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；同时设置元素框最小值以防止元素框拖没了（其实是被遮住了）。使用SetCapture()和ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。

html部分代码：

js部分代码：

style部分：


ul,li{
list-style:none;
display:block;
margin:0;
padding:0;
}
.box{
width:800px;
height:32px;
overflow:hidden;
}
.left{
width:calc(30%-10px);
height:100%;
background:skyblue;
float:left;
}

.resize{
width:5px;
height:100%;
cursor:w-resize;
float:left;
}

.resize2{
width:5px;
height:100%;
cursor:w-resize;
float:left;
}

.right{
float:left;
width:35%;
height:100%;
background:tomato;
}
.mid{
float:left;
width:35%;
height:100%;
background:#f00;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vuejs通过拖动改变元素宽度实现自适应

热门推荐

随机推荐