我要评论需求：
原理：
拖动效果的实现基本都是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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论