js实现左侧边栏可拖动改变显示区域宽度

本文介绍了一个使用纯JavaScript实现的拖拽功能,通过拖动分隔线来动态调整左右两个区域的宽度。该方法适用于需要灵活调整布局宽度的应用场景。

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

    最近有这样的需求,需要实现左侧边栏能够拖动来改变显示的宽度。在网上发现的一个纯js的demo,觉得还不错,由于页面布局不一样,改动有点大,还没有应用到项目中。

先收藏起来,后期用得上,js用起来很方便。

附上demo  源码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
ul,li{margin:0;padding:0;}
body{font:14px/1.5 Arial;color:#666;}
#box{position:relative;width:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;}
#box ul{list-style-position:inside;margin:10px;}
#top,#bottom{color:#FFF;width:300px;height:400px;overflow:hidden;}
#top{background:green; float:left}
#bottom{background:skyblue;float:right}
#line{position:absolute;top:0;left:50%;height:100%;width:4px;overflow:hidden;background:red;cursor:w-resize;}
</style>
<script>
function $(id) {
 return document.getElementById(id) 
}
window.onload = function() {
 var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line");
 oLine.onmousedown = function(e) {
 var disX = (e || event).clientX;
 oLine.left = oLine.offsetLeft;
 document.onmousemove = function(e) { 
  var iT = oLine.left + ((e || event).clientX - disX);
 var e=e||window.event,tarnameb=e.target||e.srcElement;
  var maxT = oBox.clientWight - oLine.offsetWidth;
  oLine.style.margin = 0;
  iT < 0 && (iT = 0);
  iT > maxT && (iT = maxT);
  oLine.style.left = oTop.style.width = iT + "px";
  oBottom.style.width = oBox.clientWidth - iT + "px";
 $("msg").innerText='top.width:'+oLine.style.width+'---bottom.width:'+oBottom.style.width+'---oLine.offsetLeft:'+oLine.offsetLeft+'---disX:'+disX+'---tarnameb:'+tarnameb.tagName;
  return false
 }; 
 document.onmouseup = function() {
  document.onmousemove = null;
  document.onmouseup = null; 
  oLine.releaseCapture && oLine.releaseCapture()
 };
 oLine.setCapture && oLine.setCapture();
 return false
 };
};
</script>
</head>
<body>
<center>左右拖动红条可改变显示区域宽度<span id="msg"></span></center>
<div id="box">
 <div id="top">
 左
 </div>
 <div id="bottom">
 右
 </div>
 <div id="line"></div>
</div>
</body>
</html>

<think>好的,用户想用CSS和JavaScript实现可拖拽调整宽度侧导航栏。我需要先回忆一下常见的实现方法。通常,这种效果需要以下几个步骤:首先,导航栏和内容区域的布局。应该使用Flex布局或者浮动来让两者并排显示。Flex可能更灵活,尤其是调整宽度时,内容区域自动填充剩余空间。记得设置min-width,防止导航栏被拖得太小或太大。 然后,拖拽条的设计。通常会在导航栏右侧放置一个垂直的拖拽条,宽度几像素,设置cursor: col-resize,这样鼠标悬停时会显示可拖拽的图标。还要给这个拖拽条添加事件监听:mousedown、mousemove、mouseup。接下来是JavaScript部分。当用户按下鼠标(mousedown事件)时,需要记录初始的X坐标和导航栏的当前宽度。接着监听mousemove事件,计算鼠标移动的距离,更新导航栏的宽度。最后,在mouseup时移除事件监听,避免不必要的计算。 需要注意的是,在拖拽过程中可能会触发文本选中,所以要阻止默认行为,比如在mousemove事件中调用e.preventDefault()。另外,CSS的user-select属性可以设置为none,防止拖动时选中文本。 可能还需要处理窗口大小变化的情况,或者考虑响应式设计,但用户的问题主要是基础实现,所以先专注于核心功能。 代码结构方面,HTML需要一个包含导航栏、拖拽条和内容区域的容器。CSS使用Flex布局,导航栏固定宽度,拖拽条样式,内容区域flex-grow:1。JavaScript部分用事件监听来处理拖拽逻辑。 检查是否有遗漏点,比如性能优化,比如使用requestAnimationFrame,但基础实现可能不需要。另外,考虑兼容性,但用户可能更关注现代浏览器的支持。 最后,生成相关问题,帮助用户深入理解,比如优化拖拽体验、不同布局方法、浏览器兼容性问题等。</think>### CSS+JS实现可拖拽侧边栏 #### 实现步骤 1. **HTML结构** ```html <div class="container"> <div class="sidebar" id="sidebar"> <div class="drag-bar" id="dragBar"></div> </div> <div class="content"></div> </div> ``` 2. **基础CSS布局** ```css .container { display: flex; height: 100vh; } .sidebar { width: 300px; background: #f0f0f0; position: relative; transition: width 0.2s; } .drag-bar { width: 8px; height: 100%; background: #ccc; position: absolute; right: 0; cursor: col-resize; } .content { flex: 1; background: white; } ``` 3. **JavaScript核心逻辑** ```javascript const dragBar = document.getElementById('dragBar'); const sidebar = document.getElementById('sidebar'); let isDragging = false; dragBar.addEventListener('mousedown', (e) => { isDragging = true; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(e) { if (!isDragging) return; const newWidth = e.clientX - sidebar.getBoundingClientRect().left; sidebar.style.width = `${Math.max(200, Math.min(600, newWidth))}px`; // 设置最小200px,最大600px } function onMouseUp() { isDragging = false; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` #### 优化技巧 1. 添加`user-select: none`防止拖动时选中文本 2. 使用`transform: translateZ(0)`启用GPU加速 3. 添加拖动时的半透明遮罩层提升体验
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值