鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局

1. 实现的效果如下图所示：

2. 思路

3.代码

3.1 js核心代码简单理解版：

3.2 实际应用-react版

4. 使用flex实现左右两栏式经典布局

4.1 图示：

4.2 代码实例：

1. 实现的效果如下图所示：

2. 思路

1. 使用定位在左侧菜单栏右侧写一个不可见div，鼠标经过鼠标指针样式变换

2. 监听事件：鼠标按下、抬起、移动，需要一个变量，来记录当前是按下还是抬起，初始为false，按下时为true，抬起时为false，如果是true的情况可以移动。

3.记录鼠标偏移值e.screenX，借此控制菜单栏宽度，使用min、maxwidth控制最小或最大宽度

4.性能优化，采用节流或防抖

3.代码

分为js和react两个版本，以供参考

3.1 js核心代码简单理解版：

<div class="menu-wrapper"><div class="resize-bar"></div></div><div class="content"></div><script>let resizing = falseconst menu = document.querySelector('.menu-wrapper')const resizeBar = document.querySelector('.resize-bar')// 监听： 当鼠标按下，变量设置为true表示已经按下resizeBar.addEventListener('mousedown', () => {resizing = true})// 监听：当鼠标移动，将鼠标的位置赋值给元素的宽度window.addEventListener('mousemove', (e) => {if (resizing) {e.preventDefault()e.stopPropagation()const { screenX } = emenu.style.width = screenX + 'px'}})// 监听：当鼠标抬起，变量设置为false表示已经抬起window.addEventListener('mouseup', () => {resizing = false;})</script>

3.2 实际应用-react版

结合flex左右布局，鼠标控制的是左侧 flex：0 0 200px 的宽度，以及设置最小和最大的宽度，使用节流方式优化性能

                           // 设置的不可见div<divclassName='resize-bar'style={{width: "10px",height: "100%",minHeight: "4.6875rem",position: "absolute",top: "0",right: "0",cursor: "col-resize",zIndex: "999999999"}}></div>// react代码部分：setTimeout(() => {let prevCursorOffset = -1let resizing = falseconst menu: any = document.querySelector(".mouseDrag")const resizeBar: any = document.querySelector(".resize-bar")resizeBar.addEventListener("mousedown", () => {resizing = true})window.addEventListener("mousemove", handleResizeMenu) window.addEventListener("mouseup", () => {resizing = false})function handleResizeMenu(e) {if (!resizing) {return}const {screenX} = e// 加上这两行代码，避免移动鼠标时选择界面元素e.preventDefault()e.stopPropagation()if (prevCursorOffset === -1) {prevCursorOffset = screenX// 鼠标偏移量大于50时执行一次大小调整} else if (Math.abs(prevCursorOffset - screenX) >= 50) {menu.style.flex = `0 0 ${screenX}px` // 设置左侧宽度menu.style.maxWidth = "500px" // 设置左侧最大宽度prevCursorOffset = screenX}}}, 1500)

4. 使用flex实现左右两栏式经典布局

好处：使用flex布局可以使右侧内容区域自适应

4.1 图示：

4.2 代码实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-左右布局</title><style>.wrap {margin: 0 auto;width: 80%;display: flex;}#left {flex: 0 0 200px; /* 左侧固定200px */height: 500px;background: red;}#right {flex: 1; /* 随父级变化 */height: 500px;background: burlywood;}</style></head>
<body>
<div class="wrap"><aside id="left"></aside><section id="right">右侧</section>
</div></body>
</html>

鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局相关推荐

js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
鼠标拖拽调整div大小
鼠标拖拽调整div大小实现思路根据鼠标位置改变鼠标样式当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的 ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
3dmax java_Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
【计算机图形】制作能够利用鼠标拖拽实现360度旋转的3D人体模型flash文件
前段时间,由于要对参加挑战杯的系统进行改善,老师要求我们在系统当中添加一个可旋转的3D人体模型,于是俺陷入了深深的思考当中.之前一直都没有接触过3D模型的制作,而且老师这回给的时间又特紧,当时那个急呀 ...
Axure 10 案例：模拟鼠标拖拽画框线的效果
介绍鼠标拖拽画框线是我们常用的操作.可以通过Axure来完美的模拟鼠标拖拽画框线的效果,当接触到了其他控件的时候,可以通过交互来表示接触状态. 今天,就让我们来学习如何制作它. 预览效果预览原型 ...
WPF 在image控件用鼠标拖拽出矩形
今天有小伙伴问我一个问题,在image控件用鼠标拖拽出矩形,本文告诉大家如何使用鼠标画出矩形做出来的效果先请大家看一下最简单的方法是在 Down 的时候记录按下的点,在移动的时候重新计算所在的宽 ...
在屏幕的任意位置拖拽，控制精灵移动
本文首发于微信公众号: 小蚂蚁教你做游戏.欢迎关注领取更多学习做游戏的原创教程资料,每天学点儿游戏开发知识. 嗨!大家好,我是小蚂蚁. 最近一直在录制视频教程,很少写图文教程,难免有些生疏.一项技能练 ...
unity2d里实现鼠标拖拽物体的功能
在 Unity 中实现鼠标拖拽物体的功能需要使用到 Unity 的 Physics 系统. 要实现鼠标拖拽物体,你需要在场景中添加以下内容: 一个 Rigidbody 2D 组件,用于控制物体的运动. ...

鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局

1. 实现的效果如下图所示：

2. 思路

3.代码

3.1 js核心代码简单理解版：

3.2 实际应用-react版

4. 使用flex实现左右两栏式经典布局

4.1 图示：

4.2 代码实例：

鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局相关推荐

最新文章

热门文章