前端拖拽改变两个div的宽度_前端拖动宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37809911/article/details/99691311

该博客展示了如何使用HTML、CSS和JavaScript实现一个可拖动的div布局，允许用户通过拖动分隔条来改变左右两个div的宽度。代码中详细定义了各个元素的样式和交互逻辑，提供了一个动态调整内容区域大小的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

左右排版的 div 容器，可以拖动改变 div 宽度的占比。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resizable Div Container</title>
<meta name="description" content="可以对div进行拖动缩放大小">
<style type="text/css">
#container.resizable {
width: 100%;
height: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
position: relative;
opacity: 0;
}
#container.resizable #left {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 85%;
overflow: hidden;
background-color: #ccc;
}
#container.resizable #right {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 85%;
background: #fff;
padding-left: 4px;
overflow: hidden;
background-color: #ddd;
}
#container.resizable #resizor {
position: absolute;
top: 50%;
right: 85%;
cursor: w-resize;
background-color: #666;
border-radius: 5px;
margin-top: -10px;
width: 6px;
height: 20px;
/*background: url('/public/static/admin/images/resize.png') repeat-y;*/
background-size: cover;
background-position: center;
z-index: 99999;
}
</style>
</head>
<body>
<div id="container" class="resizable">

<div id="left">
<p>左侧内容</p>
</div>
<div id="resizor" title="拖动我"></div>

<div id="right">
<p>右侧内容</p>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
var isResizing = false;
var lastDownX = 0;

$(function () {
var container = $('#container.resizable');
// 根据当前窗口大小设定 container 的高度
container.css({'height': ($(window).height() - 20), 'opacity': 1});

var left = $('#left');
var right = $('#right');
var resizor = $('#resizor');

resizor.on('mousedown', function (e) {
isResizing = true;
lastDownX = e.clientX;
});

$(document).on('mousemove', function (e) {
if (!isResizing) return true;
var offsetRight = container.width() - (e.clientX - container.offset().left);
// 判断左右拖动范围
if (offsetRight < 0 || offsetRight >= container.width()) {
isResizing = false;
return true;
}
left.css('right', offsetRight);
resizor.css('right', offsetRight);
right.css('width', offsetRight);
}).on('mouseup', function (e) {
isResizing = false;
});
});
</script>
</body>
</html>