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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
javascript 写类方式之五
Jul 05 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
详解javascript事件冒泡
Jan 09 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
微信小程序实现底部弹出模态框
Nov 18 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下的权限算法的实现
2007/04/28 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
javascript radio 联动效果
2009/03/04 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
用C++封装MySQL的API的教程
2015/05/06 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python 检查文件mime类型的方法
2018/12/08 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
幼儿园亲子活动方案
2014/01/29 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
团员个人总结
2015/02/26 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电