使用Vue实现拖动改变元素宽度的方法？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
需求：
原理：
拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；同时设置元素框最小值以防止元素框拖没了（其实是被遮住了）。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。
html部分代码：
计算
安全
数据库
网络和加速
企业服务
<template>
<div>
<ul class="box" ref="box">
<li class="left" ref="left">西瓜</li>
<li class="resize" ref="resize"></li>
<li class="mid" ref="mid">备注2</li>
<li class="resize2" ref="resize2"></li>
<li class="right" ref="right">test</li>
</ul>
<ul class="box" ref="box">
<li class="left" ref="left">芒果</li>
<li class="resize" ref="resize"></li>
<li class="mid" ref="mid">备注</li>
<li class="resize2" ref="resize2"></li>
<li class="right" ref="right">test</li>
</ul>
</div>
</template>js部分代码：
<script>
export default {
mounted () {
this.dragControllerDiv();
},
methods: {
dragControllerDiv: function () {
var resize = document.getElementsByClassName('resize');
var resize2 = document.getElementsByClassName('resize2');
var left = document.getElementsByClassName('left');
var right = document.getElementsByClassName('right');
var mid = document.getElementsByClassName('mid');
var box = document.getElementsByClassName('box');
for (let i = 0; i < resize.length; i++) {
resize[i].onmousedown = function (e) {
var startX = e.clientX;
resize[i].left = resize[i].offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var rightW = right[i].offsetWidth;
var moveLen = resize[i].left + (endX - startX);
var maxT = box[i].clientWidth - resize[i].offsetWidth;
if (moveLen < 150) moveLen = 150;
if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;
resize[i].style.left = moveLen;
for (let j = 0; j < left.length; j++) {
left[j].style.width = moveLen + 'px';
mid[j].style.width = (box[i].clientWidth - moveLen - rightW - 10) + 'px';
}
}
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture();
}
resize[i].setCapture && resize[i].setCapture();
return false;
}
}
for (let i = 0; i < resize2.length; i++) {
resize2[i].onmousedown = function (e) {
var startX = e.clientX;
resize2[i].left = resize2[i].offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var leftW = left[i].offsetWidth;
var moveLen = resize2[i].left + (endX - startX) - leftW;
var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5;
if (moveLen < 150) moveLen = 150;
if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;
resize2[i].style.left = moveLen;
for (let j = 0; j < right.length; j++) {
mid[j].style.width = moveLen + 'px';
right[j].style.width = (box[i].clientWidth - moveLen - leftW - 10) + 'px';
}
}
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize2[i].releaseCapture && resize2[i].releaseCapture();
}
resize2[i].setCapture && resize2[i].setCapture();
return false;
}
}
}
}
}
</script>style部分：
<style scoped>
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;
}
</style>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
