Vuejs通过拖动改变元素宽度实现自适应


Posted in Javascript onSeptember 02, 2020

需求:

Vuejs通过拖动改变元素宽度实现自适应

原理:

拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。

html部分代码:

<template>
<div>
 <ul class="box" ref="box">
  <li class="left" ref="left">西瓜</li>
  <li class="resize" ref="resize"></li>
  <li class="mid" ref="mid">备注2</li>
  <li class="resize2" ref="resize2"></li>
   <li class="right" ref="right">test</li>
 </ul>
 <ul class="box" ref="box">
  <li class="left" ref="left">芒果</li>
  <li class="resize" ref="resize"></li>
  <li class="mid" ref="mid">备注</li>
  <li class="resize2" ref="resize2"></li>
  <li class="right" ref="right">test</li>
 </ul>
</div>
</template>

js部分代码:

<script>
export default {
 mounted () {
  this.dragControllerDiv();
 },
 methods: {
  dragControllerDiv: function () {
   var resize = document.getElementsByClassName('resize');
   var resize2 = document.getElementsByClassName('resize2');
   var left = document.getElementsByClassName('left');
   var right = document.getElementsByClassName('right');
   var mid = document.getElementsByClassName('mid');
   var box = document.getElementsByClassName('box');
   for (let i = 0; i < resize.length; i++) {
    resize[i].onmousedown = function (e) {
     var startX = e.clientX;
     resize[i].left = resize[i].offsetLeft;
     document.onmousemove = function (e) {
      var endX = e.clientX;
      var rightW = right[i].offsetWidth;
      var moveLen = resize[i].left + (endX - startX);
      var maxT = box[i].clientWidth - resize[i].offsetWidth;
      if (moveLen < 150) moveLen = 150; 
      if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;

      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 - rightW - 10) + 'px';
      }
     }
     document.onmouseup = function (evt) {
      document.onmousemove = null;
      document.onmouseup = null; 
      resize[i].releaseCapture && resize[i].releaseCapture();
     }
     resize[i].setCapture && resize[i].setCapture();
     return false;
    }
   }
   for (let i = 0; i < resize2.length; i++) {
    resize2[i].onmousedown = function (e) {
     var startX = e.clientX;
     resize2[i].left = resize2[i].offsetLeft;
     document.onmousemove = function (e) {
      var endX = e.clientX;
      var leftW = left[i].offsetWidth;
      var moveLen = resize2[i].left + (endX - startX) - leftW;
      var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5;
      if (moveLen < 150) moveLen = 150; 
      if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;

      resize2[i].style.left = moveLen;
      for (let j = 0; j < right.length; j++) {
       mid[j].style.width = moveLen + 'px';
       right[j].style.width = (box[i].clientWidth - moveLen - leftW - 10) + 'px';
      }
     }
     document.onmouseup = function (evt) {
      document.onmousemove = null;
      document.onmouseup = null; 
      resize2[i].releaseCapture && resize2[i].releaseCapture();
     }
     resize2[i].setCapture && resize2[i].setCapture();
     return false;
    }
   }
  }
 }
}
</script>

style部分:

<style scoped>
ul,li{
 list-style: none;
 display: block;
 margin:0;
 padding:0;
}
.box{
 width:800px;
 height:32px;
 overflow:hidden;
}
.left{
 width:calc(30% - 10px);
 height:100%; 
 background:skyblue;
 float:left;
}

.resize{
 width:5px;
 height:100%;
 cursor: w-resize;
 float:left;
}

.resize2{
 width:5px;
 height:100%;
 cursor: w-resize;
 float:left;
}

.right{
 float:left;
 width:35%;
 height:100%; 
 background:tomato;
}
.mid{
 float:left;
 width:35%;
 height:100%; 
 background:#f00;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
详解angular element()方法使用
Apr 08 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 #Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 #Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 #Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 #Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 #Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 #Javascript
JS继承实现方法及优缺点详解
Sep 02 #Javascript
You might like
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP高级OOP技术演示
2009/08/27 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
js实现Tab选项卡切换效果
2020/07/17 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
python引用DLL文件的方法
2015/05/11 Python
python协程用法实例分析
2015/06/04 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python处理大日志文件
2019/07/23 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
Python同时处理多个异常的方法
2020/07/28 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
热能动力工程毕业生自荐信
2013/11/07 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
大学生自我鉴定书
2014/03/24 职场文书
授权委托书格式模板
2014/04/03 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
Python max函数中key的用法及原理解析
2021/06/26 Python
JavaScript 数组去重详解
2021/09/15 Javascript