vue3 - 实现可拖拽侧边栏+右侧区域自适应宽度效果，拖动侧边栏以便自由调整左右两侧的宽度，vue3如何实现通过拖拽动态调整div容器的大小，导航菜单动态拖曳调整宽高（详细示例代码，一键复制运行）

于 2025-04-03 17:07:35 发布
阅读量6.8k 收藏 3
点赞数 11
分类专栏： Vue组件与功能(工作经验) 文章标签： vue3 vue3侧边栏可拖拽 右侧区域可自适应宽度 拖动侧边栏自由调整左右两侧宽度 拖动div边框改变容器大小 左侧菜单栏可拖动调整宽度 后台管理网页动态调整分区宽高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/146983119
版权

效果图

在vue3项目开发中，详解vue3实现div拖拽改变元素大小，页面布局侧边栏可拖拽动态改变宽度，vue3中实现拖动调整左右两侧div的宽度，实现左右div可通过中间部分拖拽调整宽度，常见于后台管理系统布局需要动态调整分区宽度/高度等需求，支持与element plus、ant design vue等组件搭配，另外解决频繁拖拽卡顿不流畅问题。

提供详细示例代码，新手小白复制稍微改改就能用了。

在这里插入图片描述

完整源码

全部代码如下，复制运行即可。

了解本专栏 订阅专栏 解锁全文
Vue3 - Element Plus 菜单侧边栏可拖动调整左右两侧宽度，el-menu菜单组件拖拽中间的分隔栏可调整布局宽度，后台管理系统左侧导航栏可拖曳自由调整大小（Menu菜单拖拽条，详细代码）
王二红
04-03 5757
vue3，element-plus，el-menu，Menu菜单，Vue3+Element拖动侧边栏以便自由调整左右两侧的宽度，el-menu侧边栏可拖拽，右侧区域可自适应宽度，el-menu可拖拽侧边栏实现，菜单栏可以拖动改变宽度，vue3实现左侧导航菜单可拖拽改变左侧导航宽度，vue3中实现拖动调整左右两侧div的宽度(左右拖拽)，菜单可左右拖曳调整，vue3修改侧边导航栏宽度方法，vue3动态修改侧边菜单栏宽度，实现鼠标左右拖拽移动，去除滚动条，element拖动侧边栏以便自由调整左右两侧的宽度，vu
Vue3 拖拽分隔条动态调整相邻两个盒子的宽度（可反复拖拽）
m0_73078350的博客
03-04 1219
用户可以通过拖拽分隔条（.resize元素）来调整相邻两个盒子的宽度。左侧盒子和右侧盒子的宽度会根据拖拽的距离动态变化。左侧盒子的宽度最大为500px，最小为250px。右侧盒子的宽度最小为250px。当宽度达到最小或最大值时，拖拽操作会被限制。如果子元素没有设置宽度，则默认分配flex: 1，使其均匀占据剩余空间。拖拽分隔条时，分隔条的颜色会变化（通过和onMouseup实现）。拖拽过程中，实时计算并更新左右盒子的宽度。使用函数兼容不同浏览器获取下一个兄弟元素的方式。
Vue3中div自由拖拽宽度和高度
liuzaixi的博客
02-22 1487
Vue3中我们会遇到自由拖拽宽度和高度的页面需求，查看很多方法都无法满足当前需求。下面是我们Vue3版本的代码，非常简单主要构想说粗发拖拽方法，把所需要的div的高宽进行拖拽位置进行监听来加减自身div的px值。直接复制粘贴就可以实现效果。根据自己需求更改即可投入使用，非常方便快捷。
vue3中自定义split组件，分割为可以拖拽调整宽度的左右两块。
qq_43433815的博客
06-13 1722
自定义split组件，将区域分割为左右两部分，并可拖拽调整宽度，双击恢复初始比例。比较简单，可以根据自己的需求稍作修改
Vue3实现div拖拽改变宽高
倚栏听风
10-08 1850
拖拽改变div宽高
【Vue】Vue3 超简单拖拽条动态修改容器宽度
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-20 1192
【代码】【Vue】Vue3 超简单拖拽条动态修改容器宽度。
Vue3中div自由拖拽宽度和高度。
程序研博客
06-15 6453
Vue3中我们会遇到自由拖拽宽度和高度的页面需求，查看很多方法都无法满足当前需求。下面是我们Vue3版本的代码，直接复制粘贴就可以实现效果。根据自己需求更改即可投入使用，非常方便快捷。（本人文章全都是免费开源，拒绝收费。构建果然免费共享技术环境）下面希望各位大哥支持一下我开发的小程序，点击一下增加一下我的用户量。如有建议可以私信我非常感激。
手动拖拽改变DIV宽度，分栏
weixin_41463944的博客
07-22 624
<!-- * @Author: your name * @Date: 2021-07-22 11:01:08 * @LastEditTime: 2021-07-22 15:09:20 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \internetPlatform\src\views\zhangming\systemManage\test2.vue --&g
拖拽改变两个div盒子的大小vue2和vue3版本
weixin_57612248的博客
03-22 261
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
Vue2 - Element UI 菜单侧边栏可拖动调整左右两侧宽度，el-menu菜单组件拖拽中间的分隔栏可调整布局宽度，后台管理系统左侧导航栏可拖曳自由调整大小（Menu菜单拖拽条，详细示例代码）
最新发布
王二红
04-03 5508
vue，element ui，el-menu，Menu菜单，Vue2 + ElementUI拖动侧边栏以便自由调整左右两侧的宽度，vue中实现拖动调整左右两侧div的宽度(左右拖拽)，菜单可左右拖曳调整，vue修改侧边导航栏宽度方法，vue动态修改侧边菜单栏宽度，实现鼠标左右拖拽移动，去除滚动条，element拖动侧边栏以便自由调整左右两侧的宽度，el-menu侧边栏可拖拽，右侧区域可自适应宽度，el-menu可拖拽侧边栏实现，菜单栏可以拖动改变宽度，vue实现左侧导航菜单可拖拽改变左侧导航宽度，去掉侧边栏
vue中实现拖动调整左右两侧div的宽度的示例代码
01-19
还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue 拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们...
vue3 - ant design vue 抽屉弹框组件 a-drawer 拖曳侧边修改宽度功能，让Drawer抽屉框可以拖拽边缘动态修改宽度效果，vue3+antd3如何让抽屉组件变成可拖动百分比宽
高级前端工程师
07-25 2988
vue3，ant design vue，antd，抽屉弹框，a-drawer，抽屉组件Drawer，可拖动的抽屉，拖曳，拖拽，按住侧边进行左右拖动改变宽度，鼠标按下拖曳拖拽拖动，动态改变宽度，vue3+antd3如何将drawer抽屉弹框修改成可以左右拖动动态修改宽度，抽屉弹框可拖曳动态调整宽度，可调整大小的抽屉组件，可拖拉宽度抽屉，添加可拖动侧边栏宽度的功能，拖曳改变宽度，抽屉Drawer组件实现鼠标拖拽控制宽度，antd实现宽度拖拽，实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围，鼠标拖拽的
vue3 div实现鼠标拖拽放大缩小
前端小白成长记
02-21 2560
vue3 div实现鼠标拖拽放大缩小
vue3+ts 拖拽容器边缘，改变容器宽度和高度
x_nweBorder01k的博客
06-07 608
vue3+ts 拖拽容器边缘，改变容器宽度和高度
vue拖动改变div宽度
Harrietjia的博客
04-14 3171
TextWidthChange(e) { let odivParent = e.currentTarget.parentNode; //获取目标父元素 let dx= e.clientX;//当你第一次单击的时候，存储x轴的坐标。 let dw= odivParent.offsetWidth;//存储默认的div的宽度。 docum...
简单实现vue3（ts版本） 拖动改变元素宽高
weixin_45887491的博客
11-10 1720
vue3 typescript 拖动角落改变元素宽高
vue拖拽调整宽度指令
JOKERJZJ的博客
04-06 764
【代码】vue拖拽调整宽度指令。
Vue3拖拽修改左侧元素宽度组件开发
qq_43225508的博客
05-26 848
Vue3拖拽修改左侧元素宽度组件开发
vue中实现拖动调整左右两侧div的宽度
05-20
可以使用`vue-draggable-resizable`插件来实现拖动调整左右两侧div的宽度。 首先在项目中安装`vue-draggable-resizable`： ``` npm install vue-draggable-resizable --save ``` 然后在需要使用的组件中引入： ```javascript import VueDraggableResizable from &#39;vue-draggable-resizable&#39; import &#39;vue-draggable-resizable/dist/VueDraggableResizable.css&#39; ``` 接着在组件中使用`vue-draggable-resizable`： ```html <template> <div> <vue-draggable-resizable :w="leftWidth" :h="height" :x="0" :y="0" :min-width="minWidth" :max-width="maxWidth" :parent="true" :active="true" :grid="[1, 1]" :handles="[&#39;e&#39;]" @resize="onResize" > <div class="left"></div> </vue-draggable-resizable> <div class="divider"></div> <div class="right"></div> </div> </template> <script> import VueDraggableResizable from &#39;vue-draggable-resizable&#39; import &#39;vue-draggable-resizable/dist/VueDraggableResizable.css&#39; export default { components: { VueDraggableResizable }, data() { return { leftWidth: 200, height: 500, minWidth: 100, maxWidth: 400 } }, methods: { onResize() { // 当左侧div宽度改变时触发 } } } </script> ``` 在上面的代码中，我们使用了`vue-draggable-resizable`组件来实现拖动调整左侧div的宽度。具体的参数和事件如下： - `w`：左侧div的宽度 - `h`：左侧div的高度 - `x`：左侧div的x坐标 - `y`：左侧div的y坐标 - `min-width`：左侧div的最小宽度 - `max-width`：左侧div的最大宽度 - `parent`：是否限制在父元素内 - `active`：是否活动状态 - `grid`：拖拽的网格大小 - `handles`：拖拽的手柄位置 - `@resize`：左侧div改变宽度时触发的事件 通过设置`handles`为`[&#39;e&#39;]`，表示只能横向拖动调整宽度，而不能改变高度。当左侧div的宽度改变时，会触发`@resize`事件，在事件处理函数中可以实现相应的逻辑。 最后，为了实现左右两侧div并排显示，需要在样式中设置： ```css .left { float: left; height: 100%; background-color: #f0f0f0; } .right { float: left; height: 100%; width: calc(100% - 200px); background-color: #e0e0e0; } .divider { float: left; height: 100%; width: 10px; background-color: #d0d0d0; } ``` 这样就可以实现拖动调整左右两侧div的宽度了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值