需求效果:

原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。

在vuejs中使用,methods设置方法,mounted钩子挂载:

html部分代码:

  1. <template>
  2. <div>
  3. <ul class="box" ref="box">
  4. <li class="left" ref="left">西瓜</li>
  5. <li class="resize" ref="resize"></li>
  6. <li class="mid" ref="mid">备注2</li>
  7. <li class="resize2" ref="resize2"></li>
  8. <li class="right" ref="right">test</li>
  9. </ul>
  10. <ul class="box" ref="box">
  11. <li class="left" ref="left">芒果</li>
  12. <li class="resize" ref="resize"></li>
  13. <li class="mid" ref="mid">备注</li>
  14. <li class="resize2" ref="resize2"></li>
  15. <li class="right" ref="right">test</li>
  16. </ul>
  17. </div>
  18. </template>

js部分代码

  1. <script>
  2. export default {
  3. mounted () {
  4. this.dragControllerDiv();
  5. },
  6. methods: {
  7. dragControllerDiv: function () {
  8. var resize = document.getElementsByClassName('resize');
  9. var resize2 = document.getElementsByClassName('resize2');
  10. var left = document.getElementsByClassName('left');
  11. var right = document.getElementsByClassName('right');
  12. var mid = document.getElementsByClassName('mid');
  13. var box = document.getElementsByClassName('box');
  14. for (let i = 0; i < resize.length; i++) {
  15. resize[i].onmousedown = function (e) {
  16. var startX = e.clientX;
  17. resize[i].left = resize[i].offsetLeft;
  18. document.onmousemove = function (e) {
  19. var endX = e.clientX;
  20. var rightW = right[i].offsetWidth;
  21. var moveLen = resize[i].left + (endX - startX);
  22. var maxT = box[i].clientWidth - resize[i].offsetWidth;
  23. if (moveLen < 150) moveLen = 150;
  24. if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;
  25.  
  26. resize[i].style.left = moveLen;
  27.  
  28. for (let j = 0; j < left.length; j++) {
  29. left[j].style.width = moveLen + 'px';
  30. mid[j].style.width = (box[i].clientWidth - moveLen - rightW - 10) + 'px';
  31. }
  32. }
  33. document.onmouseup = function (evt) {
  34. document.onmousemove = null;
  35. document.onmouseup = null;
  36. resize[i].releaseCapture && resize[i].releaseCapture();
  37. }
  38. resize[i].setCapture && resize[i].setCapture();
  39. return false;
  40. }
  41. }
  42. for (let i = 0; i < resize2.length; i++) {
  43. resize2[i].onmousedown = function (e) {
  44. var startX = e.clientX;
  45. resize2[i].left = resize2[i].offsetLeft;
  46. document.onmousemove = function (e) {
  47. var endX = e.clientX;
  48. var leftW = left[i].offsetWidth;
  49. var moveLen = resize2[i].left + (endX - startX) - leftW;
  50. var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5;
  51. if (moveLen < 150) moveLen = 150;
  52. if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;
  53.  
  54. resize2[i].style.left = moveLen;
  55. for (let j = 0; j < right.length; j++) {
  56. mid[j].style.width = moveLen + 'px';
  57. right[j].style.width = (box[i].clientWidth - moveLen - leftW - 10) + 'px';
  58. }
  59. }
  60. document.onmouseup = function (evt) {
  61. document.onmousemove = null;
  62. document.onmouseup = null;
  63. resize2[i].releaseCapture && resize2[i].releaseCapture();
  64. }
  65. resize2[i].setCapture && resize2[i].setCapture();
  66. return false;
  67. }
  68. }
  69. }
  70. }
  71. }
  72. </script>

style部分

  1. <style scoped>
  2. ul,li{
  3. list-style: none;
  4. display: block;
  5. margin:0;
  6. padding:0;
  7. }
  8. .box{
  9. width:800px;
  10. height:32px;
  11. overflow:hidden;
  12. }
  13. .left{
  14. width:calc(30% - 10px);
  15. height:100%;
  16. background:skyblue;
  17. float:left;
  18. }
  19.  
  20. .resize{
  21. width:5px;
  22. height:100%;
  23. cursor: w-resize;
  24. float:left;
  25. }
  26.  
  27. .resize2{
  28. width:5px;
  29. height:100%;
  30. cursor: w-resize;
  31. float:left;
  32. }
  33.  
  34. .right{
  35. float:left;
  36. width:35%;
  37. height:100%;
  38. background:tomato;
  39. }
  40. .mid{
  41. float:left;
  42. width:35%;
  43. height:100%;
  44. background:#f00;
  45. }
  46. </style>

vuejs中拖动改变元素宽度实现宽度自适应大小的更多相关文章

  1. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  2. 在触屏设备中拖动 overflow 元素

    在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...

  3. JS 实现 ResizeBar,可拖动改变两个区域(带iframe)大小

    将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...

  4. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  5. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  6. get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。

    设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...

  7. js 元素的各种宽度高度

    一.属性 1.只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和 ...

  8. 利用CSS3中的clac()实现按照屏幕分辨率自适应宽度

    1.简介 calc()看其外表像个函数.平时在制作页面的时候,总会碰到有的元素是100%的宽度(例如body元素).如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子 ...

  9. jquery 获取元素的 实际宽度和高度

    jquery outerHeight方法 outerWidth方法 转: http://www.cnblogs.com/zhja/archive/2012/11/07/2758665.html jqu ...

随机推荐

  1. 阿里巴巴的 Kubernetes 应用管理实践经验与教训

    作者 | 孙健波(天元)  阿里巴巴技术专家 导读:本文整理自孙健波在 ArchSummit 大会 2019 北京站演讲稿记录.首先介绍了阿里巴巴基于 Kubernetes 项目进行大规模应用实践过程 ...

  2. [TimLinux] WireShark 安装篇——CentOS7

    1. 下载 libpcap: http://www.tcpdump.org/release/libpcap-1.9.0.tar.gz cmake: https://github-production- ...

  3. [TimLinux] CPU 常见架构介绍

    1. 简介 系统性能依赖硬件架构,CPU架构决定了硬件的布局.常见的CPU架构:SMP, NUMA, MPP. 2. SMP(对称多处理器) SMP:Symmetric Multiprocessing ...

  4. [TimLinux] Python 函数

    1. 函数(function)与方法(method)的区别 方法:在类结构体中通过def语句声明的代码块称为方法,比如类方法(classmethod),实例方法,静态方法(staticmethod)等 ...

  5. hdu3015,poj1990树状数组

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3015 题意:给定n组数,每组数有值x和值h,求n组数两两的val的总和.将所有x和所有h分别离散化(不 ...

  6. Nios II的Boot过程分析

    目录 1       概述....................................................................... 1 2       几种常见的 ...

  7. 【JS】304- KOA2框架原理解析和实现

    ); , () => {     ); 实现koa的第一步就是对以上的这个过程进行封装,为此我们需要创建application.js实现一个Application类的构造函数: ); , () ...

  8. redis(4)--redis集群之主从复制

    集群 先来简单了解下redis中提供的集群策略, 虽然redis有持久化功能能够保障redis服务器宕机也能恢复并且只有少量的数据损失,但是由于所有数据在一台服务器上,如果这台服务器出现硬盘故障,那就 ...

  9. docker-网络模式

    Docker自身的4种网络工作方式,和一些自定义网络模式 安装Docker时,它会自动创建三个网络,bridge(创建容器默认连接到此网络). none .host host:容器将不会虚拟出自己的网 ...

  10. 【spring boot】配置信息

    ======================================================================== 1.feign 超时配置 2.上传文件大小控制 3.J ...