欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vuejs通过拖动改变元素宽度实现自适应

程序员文章站 2022-07-04 09:25:47
需求:原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔...

需求:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。