vuejs中拖动改变元素宽度实现宽度自适应大小
需求效果:
原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。
在vuejs中使用,methods设置方法,mounted钩子挂载:
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>
vuejs中拖动改变元素宽度实现宽度自适应大小的更多相关文章
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- 在触屏设备中拖动 overflow 元素
在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...
- JS 实现 ResizeBar,可拖动改变两个区域(带iframe)大小
将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。
设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...
- js 元素的各种宽度高度
一.属性 1.只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和 ...
- 利用CSS3中的clac()实现按照屏幕分辨率自适应宽度
1.简介 calc()看其外表像个函数.平时在制作页面的时候,总会碰到有的元素是100%的宽度(例如body元素).如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子 ...
- jquery 获取元素的 实际宽度和高度
jquery outerHeight方法 outerWidth方法 转: http://www.cnblogs.com/zhja/archive/2012/11/07/2758665.html jqu ...
随机推荐
- 阿里巴巴的 Kubernetes 应用管理实践经验与教训
作者 | 孙健波(天元) 阿里巴巴技术专家 导读:本文整理自孙健波在 ArchSummit 大会 2019 北京站演讲稿记录.首先介绍了阿里巴巴基于 Kubernetes 项目进行大规模应用实践过程 ...
- [TimLinux] WireShark 安装篇——CentOS7
1. 下载 libpcap: http://www.tcpdump.org/release/libpcap-1.9.0.tar.gz cmake: https://github-production- ...
- [TimLinux] CPU 常见架构介绍
1. 简介 系统性能依赖硬件架构,CPU架构决定了硬件的布局.常见的CPU架构:SMP, NUMA, MPP. 2. SMP(对称多处理器) SMP:Symmetric Multiprocessing ...
- [TimLinux] Python 函数
1. 函数(function)与方法(method)的区别 方法:在类结构体中通过def语句声明的代码块称为方法,比如类方法(classmethod),实例方法,静态方法(staticmethod)等 ...
- hdu3015,poj1990树状数组
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3015 题意:给定n组数,每组数有值x和值h,求n组数两两的val的总和.将所有x和所有h分别离散化(不 ...
- Nios II的Boot过程分析
目录 1 概述....................................................................... 1 2 几种常见的 ...
- 【JS】304- KOA2框架原理解析和实现
); , () => { ); 实现koa的第一步就是对以上的这个过程进行封装,为此我们需要创建application.js实现一个Application类的构造函数: ); , () ...
- redis(4)--redis集群之主从复制
集群 先来简单了解下redis中提供的集群策略, 虽然redis有持久化功能能够保障redis服务器宕机也能恢复并且只有少量的数据损失,但是由于所有数据在一台服务器上,如果这台服务器出现硬盘故障,那就 ...
- docker-网络模式
Docker自身的4种网络工作方式,和一些自定义网络模式 安装Docker时,它会自动创建三个网络,bridge(创建容器默认连接到此网络). none .host host:容器将不会虚拟出自己的网 ...
- 【spring boot】配置信息
======================================================================== 1.feign 超时配置 2.上传文件大小控制 3.J ...