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 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
jquery uaMatch源代码
Feb 14 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
JS控制表单提交的方法
Jul 09 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
用webAPI实现图片放大镜效果
Nov 23 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者的疑难问答(1)
2006/10/09 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
详解Django中的权限和组以及消息
2015/07/23 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
英文留学推荐信范文
2014/01/25 职场文书
社区工作者感言
2014/03/02 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL