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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
webpack 模块热替换原理
Apr 09 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP时间和日期函数详解
2015/05/08 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
js使用心得分享
2015/01/13 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python3 mmh3安装及使用方法
2019/10/09 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
财务学生的职业生涯发展
2014/02/11 职场文书
高中军训感言800字
2014/03/05 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
千与千寻观后感
2015/06/04 职场文书