[游戏开发]分割条拖动改变div宽度

一、需求

拖动分割条可以改变div宽度

二、实现

1. 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>

2. 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;
	    };
	}
}

3. 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();
	});
}