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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
Angular中$compile源码分析
Jan 28 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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编程效率的方法
2013/11/07 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
js的image onload事件使用遇到的问题
2014/07/15 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
JavaScript中的 new 命令
2019/05/22 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
详解Python中for循环是如何工作的
2017/06/30 Python
Python语言描述最大连续子序列和
2017/12/05 Python
python实现多人聊天室
2020/03/31 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
财务支持类个人的自我评价
2014/02/14 职场文书
租房协议书范本
2014/04/09 职场文书
党建工作经验交流材料
2014/05/25 职场文书
药剂专业自荐书
2014/06/20 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
平面设计师岗位职责
2014/09/18 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python