一、需求
拖动分割条可以改变div宽度
二、实现
- html
<div ref="boxContent" class="h100p flex-a-center-j-space-between">
<!-- 第一列 -->
<div ref="firstContent" class="h100p content">第一列</div>
<!-- 分割线 -->
<div ref="dividerLeft" class="divider"></div>
<!-- 第二列 -->
<div ref="secondContent" class="h100p content">第二列</div>
<!-- 分割线 -->
<div ref="dividerMid" class="divider"></div>
<!-- 第三列 -->
<div ref="thirdContent" class="h100p content">第三列</div>
<!-- 分割线 -->
<div ref="dividerRight" class="divider"></div>
<!-- 第四列 -->
<div ref="forthContent" class="h100p content">第四列</div>
</div>
- js
mounted() {
this.drapContent();
},
methods: {
drapContent() {
// 获取 左侧移动区域 的 宽度
let dividerLeft = this.$refs.dividerLeft;
// 获取 中间移动区域 的 宽度
let dividerMid = this.$refs.dividerMid;
// 获取 右侧移动区域 的 宽度
let dividerRight = this.$refs.dividerRight;
// 获取 第一列区域 的 宽度
let firstContent = this.$refs.firstContent;
// 获取 第二列区域 的 宽度
let secondContent = this.$refs.secondContent;
// 获取 第三列区域 的 宽度
let thirdContent = this.$refs.thirdContent;
// 获取 第四列区域 的 宽度
let forthContent = this.$refs.forthContent;
// 获取 整个区域 的 宽度
let boxContent = this.$refs.boxContent;
// 鼠标按下事件
dividerLeft.onmousedown = function (e) {
var startX = e.clientX;
dividerLeft.left = dividerLeft.offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var thirdContentWidth = thirdContent.offsetWidth;
var forthContentWidth = forthContent.offsetWidth;
var moveLen = dividerLeft.left + (endX - startX); // (endx-startx)=移动的距离。
var maxT = boxContent.clientWidth - dividerLeft.offsetWidth; // 容器宽度 - 左侧区域的宽度 = 右边区域的宽度
if (moveLen < 250) { moveLen = 250; }
if (moveLen > maxT - thirdContentWidth - forthContentWidth - 250) { moveLen = maxT - thirdContentWidth - forthContentWidth - 250; }
dividerLeft.style.left = moveLen;
firstContent.style.width = moveLen + 'px';
secondContent.style.width = (boxContent.clientWidth - moveLen - thirdContentWidth - forthContentWidth - 4) + 'px';
};
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
dividerLeft.releaseCapture && dividerLeft.releaseCapture(); // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
dividerLeft.setCapture && dividerLeft.setCapture(); // 该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
dividerMid.onmousedown = function (e) {
var startX = e.clientX;
dividerMid.left = dividerMid.offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var firstContentWidth = firstContent.offsetWidth;
var forthContentWidth = forthContent.offsetWidth;
var moveLen = dividerMid.left + (endX - startX) - firstContentWidth; // (endx-startx)=移动的距离。
var maxT = boxContent.clientWidth - dividerMid.offsetWidth - 2; // 容器宽度 - 左侧区域的宽度 = 右边区域的宽度
if (moveLen < 250) { moveLen = 250; }
if (moveLen > maxT - firstContentWidth - forthContentWidth - 250) { moveLen = maxT - firstContentWidth - forthContentWidth - 250; }
dividerMid.style.left = moveLen;
secondContent.style.width = moveLen + 'px';
thirdContent.style.width = (boxContent.clientWidth - moveLen - firstContentWidth - forthContentWidth - 4) + 'px';
};
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
dividerMid.releaseCapture && dividerMid.releaseCapture(); // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
dividerMid.setCapture && dividerMid.setCapture(); // 该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
dividerRight.onmousedown = function (e) {
var startX = e.clientX;
dividerRight.left = dividerRight.offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var firstContentWidth = firstContent.offsetWidth;
var secondContentWidth = secondContent.offsetWidth;
var moveLen = dividerRight.left + (endX - startX) - firstContentWidth - secondContentWidth; // (endx-startx)=移动的距离。
var maxT = boxContent.clientWidth - dividerRight.offsetWidth - 2; // 容器宽度 - 左侧区域的宽度 = 右边区域的宽度
if (moveLen < 250) { moveLen = 250; }
if (moveLen > maxT - firstContentWidth - secondContentWidth - 250) { moveLen = maxT - firstContentWidth - secondContentWidth - 250; }
dividerRight.style.left = moveLen;
thirdContent.style.width = moveLen + 'px';
forthContent.style.width = (boxContent.clientWidth - moveLen - firstContentWidth - secondContentWidth - 4) + 'px';
};
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
dividerRight.releaseCapture && dividerRight.releaseCapture(); // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
dividerRight.setCapture && dividerRight.setCapture(); // 该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
}
}
- css
.content {
width: calc(50% - 2px);
}
.divider {
height: 100%;
width: 4px;
background-color: #fff;
cursor: ew-resize;
}
再次进入该页面,各列宽度为拖动之后的宽度,需要进行初始化
mounted() {
this.$nextTick(() => {
if (this.$refs.firstContent) {
this.$refs.firstContent.style.width = this.$refs.boxContent.clientWidth * 0.25 - 2 + 'px';
}
if (this.$refs.secondContent) {
this.$refs.secondContent.style.width = this.$refs.boxContent.clientWidth * 0.25 - 2 + 'px';
}
if (this.$refs.thirdContent) {
this.$refs.thirdContent.style.width = this.$refs.boxContent.clientWidth * 0.25 - 2 + 'px';
}
if (this.$refs.forthContent) {
this.$refs.forthContent.style.width = this.$refs.boxContent.clientWidth * 0.25 - 2 + 'px';
}
this.drapContent();
});
}