使用Vue實現(xiàn)拖動改變元素寬度的方法

發(fā)布時間：2020-11-05 17:06:52 來源：億速云閱讀：948 作者：Leah 欄目：開發(fā)技術(shù)

使用Vue實現(xiàn)拖動改變元素寬度的方法？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

需求：

原理：

拖動效果的實現(xiàn)基本都是dom操作來實現(xiàn)的，通過拖動分隔線，計算分隔線與瀏覽器邊框的距離(left)，來實現(xiàn)拖動之后的不同寬度的計算；當(dāng)拖動分隔線1時，計算元素框left和mid；當(dāng)拖動分隔線2時，計算元素框mid和right；同時設(shè)置元素框最小值以防止元素框拖沒了（其實是被遮住了）。使用SetCapture() 和 ReleaseCapture()的函數(shù)功能指定窗口里設(shè)置鼠標(biāo)捕獲。

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>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

使用Vue實現(xiàn)拖動改變元素寬度的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽