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 ...
随机推荐
- 华为云北京四业务,访问北京一OBS桶,配置指南
[摘要] 华为云跨数据中心,从北京四访问北京一的OBS桶里面的数据.免去数据迁移的麻烦 1 驱动力 跨region访问OBS桶里面的数据时.如果不走云连接,一个OBS桶域名对应的IP地址,是 ...
- windows下利用iis建立网站网站并实现局域共享
博客园 首页 新随笔 联系 管理 订阅 随笔- 54 文章- 9 评论- 0 Windows下利用IIS建立网站并实现局域网共享 https://blog.csdn.net/qq_4148541 ...
- sbt assembly a fat jar for spark-submit cluster model
在用spark-submit提交作业时,用sbt package打包好的jar程序,可以很好的运行在client模式,当在cluster模式, 一直报错:Exception in thread &qu ...
- go proxy athens 部署到k8s
目录 go proxy athens 部署到k8s 一.athens简介 二.部署 1.创建 PersistentVolume 2.创建service 3.创建deployment 4.ci/cd中使 ...
- [TimLinux] django 全局变量在WSGI多进程多线程环境中的研究
场景1: 2个进程,每个进程1个线程,请求函数中设置了10秒sleep,9个请求同一URL: 结果: 1. 全局变量ID值,在每一个进程中相同,不同进程中不相同 2. 并行只能接受2个请求,同时发起多 ...
- vuex简单使用。
项目结构: 1:首先在项目中新建store.js文件,.js文件内容如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ex ...
- hdu4585Shaolin
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4585 题意: 第一个人ID为1,战斗力为1e9. 给定n,给出n个人的ID和战斗力. 每个人必须和战斗 ...
- HDU5470 Typewriter (SAM+单调队列优化DP)
Typewriter Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Tota ...
- CodeForces 5C Longest Regular Backet sequence
This is yet another problem dealing with regular bracket sequences. We should remind you that a brac ...
- rsync服务的讲解
第2章 rsync备份服务器的搭建 2.1 rsync备份服务器的概念 2.1.1 概念 rsync服务器对网站服务器数据进行备份(防止数据丢失和数据进行恢复) rsync服务器对网站服务器数据进行对 ...