JS——实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围

最新推荐文章于 2023-08-17 20:31:00 发布

wwf1225

最新推荐文章于 2023-08-17 20:31:00 发布

阅读量693

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/bettergg/article/details/89206568

版权

CSS JavaScript 布局拖动分割栏

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

135 篇文章 6 订阅

订阅专栏

https://blog.csdn.net/bettergg/article/details/89206568

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
}

#box {
width: 600px;
height: 500px;
overflow: hidden;
}

#left {
width: calc(30% - 5px);
height: 100%;
background: skyblue;
float: left;
}

#resize {
width: 5px;
height: 100%;
cursor: w-resize;
float: left;
}

#right {
float: right;
width: 70%;
height: 100%;
background: tomato;
}
</style>
</head>

<body>
<div id="box">
<div id="left"></div>
<div id="resize"></div>
<div id="right"></div>
</div>
<script>
window.onload = function () {
var resize = document.getElementById("resize");
var left = document.getElementById("left");
var right = document.getElementById("right");
var box = document.getElementById("box");
resize.onmousedown = function (e) {
var startX = e.clientX;
resize.left = resize.offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;

var moveLen = resize.left + (endX - startX);
var maxT = box.clientWidth - resize.offsetWidth;
if (moveLen < 150) moveLen = 150;
if (moveLen > maxT - 150) moveLen = maxT - 150;

resize.style.left = moveLen;
left.style.width = moveLen + "px";
right.style.width = (box.clientWidth - moveLen - 5) + "px";
}
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize.releaseCapture && resize.releaseCapture();
}
resize.setCapture && resize.setCapture();
return false;
}
}
</script>
</body>

</html>