长沙seo网站优化公司个人域名网站
原文网址：JS修改布局--两列布局，拖拽中间修改左右的宽度-CSDN博客
简介
本文介绍HTML两列布局，拖拽中间修改左右的宽度的方法（用JS）。
效果展示
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>拖拽调整大小</title><style>* {padding: 0;margin: 0;}.container {display: flex;height: 100vh;}.left-right-container {flex: 1;}#middle {width: 10px;background: rgb(230, 230, 230);}#middle:hover {cursor: col-resize;}</style>
</head>
<body>
<div class="container"><div class="left-right-container" id="left">左侧内容</div><div id="middle"></div><div class="left-right-container" id="right">右侧内容</div>
</div></body>
</html>
<script>window.onload = function drag() {let left = document.getElementById('left');let right = document.getElementById('right');let middle = document.getElementById('middle');middle.onmousedown = function (e) {//第一次单击时x轴的坐标。相对于浏览器窗口let startX = (e || event).clientX;//第一次单击时flexGrow的值let startFlexGrow = readFlexGrow(left);document.onmousemove = function (e) {let iEvent = e || event;//移动的距离（向左滑时为负数,右滑时为正数）let diff = iEvent.clientX - startX;let maxWidth = document.body.clientWidth;let middleWidth = middle.offsetWidth;let remainWidth = maxWidth - middleWidth;let flexGrow = startFlexGrow + diff / remainWidth;changeFlex(left, flexGrow);changeFlex(right, 1 - flexGrow);return false;};document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;};return false;};function changeFlex(element, flexGrow) {let suffix = ' 1 0%';element.style.setProperty('flex', '' + flexGrow + suffix);}function readFlexGrow(element) {let flex = element.style.getPropertyValue('flex');if (flex === "" || flex === null || flex === undefined) {return 0.5;}let flexValueS = flex.split(' ');return +flexValueS[0];}};
</script>