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 document.compatMode兼容性
Feb 23 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
vue-cli脚手架的安装教程图解
Sep 02 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
在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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
PHP STRING 陷阱原理说明
2010/07/24 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
twig模板常用语句实例小结
2016/02/04 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
Python 的内置字符串方法小结
2016/03/15 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Pandas中resample方法详解
2019/07/02 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
如何用Django处理gzip数据流
2021/01/29 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
员工安全生产承诺书
2014/05/22 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python函数式编程中itertools模块详解
2021/09/15 Python