vue中实现拖动调整左右两侧div的宽度的示例代码


Posted in Javascript onJuly 22, 2020

写在最前

最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样

vue中实现拖动调整左右两侧div的宽度的示例代码

这是我最终的实现效果

vue中实现拖动调整左右两侧div的宽度的示例代码

还是老话,因为我不是专业的前端工程师,只是兼职写一些简单的前端,所以这个功能的实现得益于以下博客,《vue 拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》,而我只是针对于他们提供的代码,加了亿点点自己所需要的细节。

实现原理

vue中实现拖动调整左右两侧div的宽度的示例代码

如上图所示,我们需要将要实现此功能的页面划分为三个部分,左部、调整区、右部,分别对应css样式为left、resize、mid,然后将这三个div放在css样式为box的div中即可

实现代码-HTML部分

将以下代码放置在vue页面文件中<templete></templete>标签内即可

<div class="box" ref="box">
   <div class="left">
    <!--左侧div内容-->
   </div>
   <div class="resize" title="收缩侧边栏">
    ⋮
   </div>
   <div class="mid">
    <!--右侧div内容-->
   </div>
  </div>

实现代码-CSS部分

将以下代码放置在<style> </style>标签内中即可

/* 拖拽相关样式 */
 /*包围div样式*/
 .box {
  width: 100%;
  height: 100%;
  margin: 1% 0px;
  overflow: hidden;
  box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
 }
 /*左侧div样式*/
 .left {
  width: calc(32% - 10px); /*左侧初始化宽度*/ 
  height: 100%;
  background: #FFFFFF;
  float: left;
 }
 /*拖拽区div样式*/
 .resize {
  cursor: col-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
 }
 /*拖拽区鼠标悬停样式*/
 .resize:hover {
  color: #444444;
 }
 /*右侧div'样式*/
 .mid {
  float: left;
  width: 68%; /*右侧初始化宽度*/
  height: 100%;
  background: #fff;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
 }

实现代码-拖拽事件部分

将以下代码放置在methods方法区即可

dragControllerDiv: function () {
    var resize = document.getElementsByClassName('resize');
    var left = document.getElementsByClassName('left');
    var mid = document.getElementsByClassName('mid');
    var box = document.getElementsByClassName('box');
    for (let i = 0; i < resize.length; i++) {
     // 鼠标按下事件
     resize[i].onmousedown = function (e) {
      //颜色改变提醒
      resize[i].style.background = '#818181';
      var startX = e.clientX;
      resize[i].left = resize[i].offsetLeft;
      // 鼠标拖动事件
      document.onmousemove = function (e) {
       var endX = e.clientX;
       var moveLen = resize[i].left + (endX - startX); // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
       var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

       if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
       if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

       resize[i].style.left = moveLen; // 设置左侧区域的宽度

       for (let j = 0; j < left.length; j++) {
        left[j].style.width = moveLen + 'px';
        mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
       }
      };
      // 鼠标松开事件
      document.onmouseup = function (evt) {
       //颜色恢复
       resize[i].style.background = '#d6d6d6';
       document.onmousemove = null;
       document.onmouseup = null;
       resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      };
      resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false;
     };
    }
   },

然后在mouted初始化加载部分添加即可

this.dragControllerDiv();

结语

虽然以上代码就可以实现左右div拖拽放大缩小了,但是实际应用中我遇到了一个更棘手的问题,那就是如果在某一个div中使用iframe框架的话,拖拽时会存在明显的卡顿,如果你在使用过程中遇到这个问题,可以查看我的下一篇文章vue中解决拖拽改变存在iframe的div大小时卡顿问题

到此这篇关于vue中实现拖动调整左右两侧div的宽度的示例代码的文章就介绍到这了,更多相关vue 拖动调整左右两侧div宽度内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 #Javascript
vue项目中使用多选框的实例代码
Jul 22 #Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 #Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 #Javascript
js实现查询商品案例
Jul 22 #Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 #Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 #Javascript
You might like
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js获取域名的方法
2015/01/27 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
速记Python布尔值
2017/11/09 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python简易版停车管理系统
2019/08/12 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python通过cython加密代码
2020/12/11 Python
python中time tzset()函数实例用法
2021/02/18 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
社会治安综合治理管理责任书
2014/04/16 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
新兵入伍心得体会
2014/09/04 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
三八妇女节寄语
2015/02/27 职场文书
Python基础之元类详解
2021/04/29 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android