vuejs中拖动改变元素宽度实现宽度自适应大小

更新日期: 2019-06-13阅读: 3.4k标签: 自适应

需求效果:


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

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


html部分代码

<template>
<div>
  <ul ref="box">
    <li ref="left">西瓜</li>
    <li ref="resize"></li>
    <li ref="mid">备注2</li>
    <li ref="resize2"></li>
     <li ref="right">test</li>
  </ul>
  <ul ref="box">
    <li ref="left">芒果</li>
    <li ref="resize"></li>
    <li ref="mid">备注</li>
    <li ref="resize2"></li>
    <li 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>


 原文来自:https://www.cnblogs.com/layaling/archive/2019/06/12/11009570.html


链接: https://fly63.com/article/detial/3682

html中map area 热区自适应的原生js实现方案

在做自适应网页的时候,如果在图片中使用了热区map。图片可以通过样式实现:图片大小随页面变化,MAP中每个area的坐标也随页面等比例的变化效果。根据分辨率自适应热区坐标

WKWebView加载的网页自适应大小

有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小

iframe 自适应高度的多种实现方式

实现 iframe 的自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。

移动端自适应

js动态设置html的字体大小,设计稿宽度750px,设备宽度350px,此时HTML 的font-size:50px,及1rem=50px;设置html的font-size: 13.33vw,设置html的font-size并缩放页面

HTML+Css让网页自动适应电脑手机屏幕

在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度,其中:width=device-width :表示宽度是设备屏幕的宽度,height=device-height :表示宽度是设备屏幕的宽度

CSS实现自适应正方形、等宽高比矩形

利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult

echarts 表格自适应需要注意的问题

最近在做大屏可视化,页面数据展示基本都是用百度的echarts,因为页面要做自适应,所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格,当你引用多个的时候,有些地方需要注意。

css弹性盒模型实现元素宽度(高度)自适应

css实现左侧宽度固定右侧宽度自适应:定位、浮动、margin;css3弹性盒模型实现自适应:上下高度固定中间高度自适应、左侧宽度固定右侧宽度自适应

web页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数;vw 是相对长度单位,相对于浏览器窗口的宽度,浏览器窗口宽度被均分为100个单位的vw,rem 和 vw 结合实现WEB页面等比例缩放自适应

让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和&nbsp;等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式,但是元素高度是固定的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!