vue 拖动调整左右两侧div的宽度
原文链接:https://www.cnblogs.com/layaling/p/11009570.html
原文是左中右三种情况的拖动。由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度
1、拖动,调整左右两侧宽度
<template>
<div class="wid100 hig100">
<ul class="box" ref="box">
<li class="left" ref="left">西瓜</li>
<li class="resize" ref="resize"></li>
<li class="mid" ref="mid">备注2</li>
</ul>
<ul class="box" ref="box">
<li class="left" ref="left">西瓜</li>
<li class="resize" ref="resize"></li>
<li class="mid" ref="mid">备注2</li>
</ul>
</div>
</template> <script>
export default {
name: 'Dashboard',
mounted () {
this.dragControllerDiv();
},
methods: {
dragControllerDiv: function () {
var resize = document.getElementsByClassName('resize');
var left = document.getElementsByClassName('left');
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 moveLen = resize[i].left + (endX - startX); // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度 if (moveLen < 150) moveLen = 150; // 左边区域的最小宽度为150px
if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px 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 - 10) + 'px';
}
}
// 鼠标松开事件
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
}
resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
}
} }
}
}
</script> <style lang="scss" scoped>
ul,li{
list-style: none;
display: block;
margin:0;
padding:0;
}
.box{
width:100%;
height: 48%;
margin: 1% 0px;
overflow:hidden;
}
.left{
width:calc(30% - 10px);
height:100%;
background:#c9c9c9;
float:left;
}
.resize{
width:5px;
height:100%;
cursor: w-resize;
float:left;
}
.mid{
float:left;
width:70%;
height:100%;
background:#f3f3f3;
}
</style>
vue 拖动调整左右两侧div的宽度的更多相关文章
- 拖动调整div布局大小
一.需求 实现类似windows软件的那种,拖动调整两个div的大小 二.结果示例: 三.示例代码: https://github.com/CinYung/jQuery.divResizer.git
- jQuery拖动调整表格列宽度-resizableColumns
实现鼠标可拖动调整表格列宽度 如图: 一.引入文件: <script src="/js/jquery-1.8.0.min.js" type="text/javasc ...
- 关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
- 如何设置div的宽度为100%-xx px?
如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relativ ...
- Div的宽度与高度的100%设定
div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的 ...
- CSS如何让DIV的宽度随内容的变化
[css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...
- div 内容宽度自适应、超出后换行
div 内容宽度自适应,超出后换行 { max-width:100%;width: fit-content;width: -webkit-fit-content;width: -moz-fit-con ...
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- div 自适应宽度
div 自适应宽度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
随机推荐
- [2019上海网络赛J题]Stone game
题目链接 CSLnb! 题意是求出给定集合中有多少个合法子集,合法子集的定义为,子集和>=总和-子集和$\& \&$子集和-(子集的子集和)<=总和-子集和. 其实就是很简 ...
- P3958奶酪
这个题是2017noip提高组的真题,是一个深度搜索题,得分轨迹:10-80-100pts. 在三维空间里,存在可能连通的洞(半径r),问是否可以通过这些洞从底部到达顶部.一开始我联想到了01迷宫,以 ...
- Linux——临界段,信号量,互斥锁,自旋锁,原子操作
一. linux为什么需要临界段,信号量,互斥锁,自旋锁,原子操作? 1.1. linux内核后期版本是支持多核CPU以及抢占式调度.这里就存在一个并发,竞争状态(简称竟态). 1.2. 竞态条件 发 ...
- Redis的配置与数据类型
redis window系统的redis是微软团队根据官方的linux版本高仿的 官方原版: https://redis.io/ 中文官网:http://www.redis.cn 1. redis下载 ...
- Scrapy 教程(一)-安装与入门
安装 具体请自行百度 依赖库 网上说pip安装会内分泌失调,我试了下还行吧,不过也遇到几个问题 解决方法 pip install -I cryptography 解决方法 pip install -U ...
- luogu P5331 [SNOI2019]通信
传送门 有匹配次数限制,求最小代价,这显然是个费用流的模型.每个点暴力和前面的点连匹配边,边数是\(n^2\)的. 然后发现可以转化成一个set,每次加入一个点,然后入点对set里面的出点连边.这个s ...
- css秘密花园一
css秘密花园 1.透明边框 <style> div{ width: 120px; height: 60px; margin: 30px auto; background: pink; b ...
- editplus的使用技巧
数据库sql语句中的 in 后面需要 ('xx','bb')这样的结果,多的话修改起来就比较麻烦,这时候使用editplus 的替换功能就可以实现 ,顶部菜单的 搜索 - > 替换 或者 ctr ...
- 021-制作OpenStack镜像官方文档
可参考官方文档:https://docs.openstack.org/image-guide/ 制作centos7 :https://docs.openstack.org/image-guide/ce ...
- 01JAVA入门
1 Welcome to java public class ch01Welcome { public static void main(String[] args) { System.out.pri ...