1、演示
2、 比较简单，直接上源码（内部有注释）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
}
* {
box-sizing: border-box;
}
#container {
display: flex;
height: 100vh;
}
#div1 {
flex: 0 0 205px;
min-width: 205px;
max-width: 355px;
}
#div1,
#div3 {
background: lightblue;
position: relative;
/* border: solid 1px #000; */
}
#div3 {
flex: 1;
border: solid 1px #000;
}
#div2 {
width: 5px;
height: 100%;
right: 0;
top: 0;
background-color: red;
cursor: ew-resize;
position: absolute;
display: none;
/* 悬停时的光标样式 */
}
#div1:hover #div2 {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci, blanditiis!
<div id="div2"></div>
</div>
<div id="div3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium porro, aliquid voluptatem, architecto adipisci, sit in assumenda
consectetur nisi est magnam magni veritatis dolorem. Laborum molestias quibusdam numquam dolore veritatis quam ab laudantium exercitationem
aut ratione tempore dolorum impedit nihil, voluptates alias nostrum, nulla voluptatem ea voluptate. Unde consequuntur adipisci alias numquam
culpa omnis possimus atque, et dicta illo eveniet eligendi. Aperiam distinctio ullam iure sint laudantium blanditiis, praesentium eligendi
laborum, illum maiores autem magnam deserunt voluptas similique voluptates, dolor nesciunt hic cumque officia odio quae quidem? Error tenetur,
voluptatem nulla iusto ullam impedit adipisci? Maiores error praesentium eaque accusamus!
</div>
</div>
</body>
<script>
const container = document.getElementById('container')
const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')
const div3 = document.getElementById('div3')
console.log(div1, div2, div3)
let startX = null
let startWidth1 = null
let startWidth3 = null
div2.addEventListener('mousedown', function (e) {
startX = e.clientX // 记录鼠标按下时的x坐标
startWidth1 = div1.offsetWidth // 记录 div1 当前的宽度
startWidth3 = div3.offsetWidth // 记录 div3 当前的宽度
// 应用 ew-resize 光标样式到整个文档
document.body.style.cursor = 'ew-resize'
// 禁止拖拽时选中文本
container.style.userSelect = 'none'
document.addEventListener('mousemove', resize, false)
document.addEventListener('mouseup', stopResize, false)
})
function resize(e) {
const diffX = e.clientX - startX
let newWidth1 = startWidth1 + diffX
let newWidth3 = startWidth3 - diffX
// 检查div1是否超出最小或最大宽度 并相应调整
if (newWidth1 < 205) {
newWidth1 = 205
} else if (newWidth1 > 355) {
newWidth1 = 355
}
// 因为div2是div1和div3之间的分隔条 所以需要更新div3的宽度
// 以保持总体宽度不变 我们这里假设容器总宽度是不变的
newWidth3 = container.offsetWidth - newWidth1 - div2.offsetWidth
// 设置新宽度
div1.style.flex = `0 0 ${newWidth1}px`
div3.style.flex = `${newWidth3}px`
}
function stopResize() {
document.body.style.cursor = ''
container.style.userSelect = ''
document.removeEventListener('mousemove', resize, false)
document.removeEventListener('mouseup', stopResize, false)
}
</script>
</html>
