vue div宽高自由拉伸。

最新推荐文章于 2024-02-22 17:34:16 发布
最新推荐文章于 2024-02-22 17:34:16 发布
阅读量776 收藏 4
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38295468/article/details/128200557
版权

vue div自由拉伸

效果图

居中的图片:
请添加图片描述

请添加图片描述

居中并且带尺寸的图片:
请添加图片描述

js代码

在utils创建一个对应的drag.js.

// 两列拖动改变两列宽度
export function dragTwoColDiv(contentId, leftBoxId, resizeId, rightBoxId) {
  let resize = document.getElementById(resizeId);
  let leftBox = document.getElementById(leftBoxId);
  let rightBox = document.getElementById(rightBoxId);
  let box = document.getElementById(contentId);
  resize.onmousedown = function (e) {
    let startX = e.clientX;
    resize.left = resize.offsetLeft;
    document.onmousemove = function (e) {
      let endX = e.clientX;
      let moveLen = resize.left + (endX - startX);
      let maxT = box.clientWidth - resize.offsetWidth;
      if (moveLen < 150) moveLen = 150;
      if (moveLen > maxT - 150) moveLen = maxT - 150;
      resize.style.left = moveLen;
      leftBox.style.width = moveLen + "px";
      rightBox.style.width = box.clientWidth - moveLen - 5 + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      resize.releaseCapture && resize.releaseCapture();
    };
    resize.setCapture && resize.setCapture();
    return false;
  };
}
// 三列拖动改变div宽度
export function dragThreeColDiv(
  contentId,
  leftBoxId,
  resizeOne,
  centerBoxId,
  resizeTwo,
  rightBoxId
) {
  let resizeO = document.getElementById(resizeOne);
  let resizeT = document.getElementById(resizeTwo);
  let leftBox = document.getElementById(leftBoxId);
  let rightBox = document.getElementById(rightBoxId);
  let centerBox = document.getElementById(centerBoxId);
  let box = document.getElementById(contentId);
  resizeO.onmousedown = function (e) {
    let startX = e.clientX;
    resizeO.left = resizeO.offsetLeft;
    document.onmousemove = function (e) {
      let endX = e.clientX;
      let rightW = rightBox.offsetWidth;
      let moveLen = resizeO.left + (endX - startX);
      let maxT = box.clientWidth - resizeO.offsetWidth;
      if (moveLen < 150) moveLen = 150;
      if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;
      resizeO.style.left = moveLen;
      leftBox.style.width = moveLen + "px";
      centerBox.style.width = box.clientWidth - moveLen - rightW - 10 + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      resizeO.releaseCapture && resizeO.releaseCapture();
    };
    resizeO.setCapture && resizeO.setCapture();
    return false;
  };
  resizeT.onmousedown = function (e) {
    let startX = e.clientX;
    resizeT.left = resizeT.offsetLeft;
    document.onmousemove = function (e) {
      let endX = e.clientX;
      let leftW = leftBox.offsetWidth;
      let moveLen = resizeT.left + (endX - startX) - leftW;
      let maxT = box.clientWidth - resizeT.offsetWidth - 5;
      if (moveLen < 150) moveLen = 150;
      if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;
      resizeT.style.left = moveLen;
      centerBox.style.width = moveLen + "px";
      rightBox.style.width = box.clientWidth - moveLen - leftW - 10 + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      resizeT.releaseCapture && resizeT.releaseCapture();
    };
    resizeT.setCapture && resizeT.setCapture();
    return false;
  };
}
// 上下拖动改变上下两个模块的高度
export function dragTwoRowDiv(contentId, topBoxId, resizeId, downBoxId) {
  let resize = document.getElementById(resizeId);
  let topBox = document.getElementById(topBoxId);
  let downBox = document.getElementById(downBoxId);
  let box = document.getElementById(contentId);
  resize.onmousedown = function (e) {
    let startY = e.clientY; //移动起始值
    resize.top = resize.offsetTop; //元素距顶起始值
    document.onmousemove = function (e) {
      let endY = e.clientY; //移动后值
      let moveLen = resize.top + (endY - startY); //鼠标上下移动了多少
      let maxT = box.clientHeight - resize.offsetHeight; //父级盒子去掉拉动条的总高度
      if (moveLen < 100) moveLen = 100;
      if (moveLen > maxT - 100) moveLen = maxT - 100;
      resize.style.top = moveLen;
      topBox.style.height = moveLen + "px";
      downBox.style.height = box.clientHeight - moveLen - 5 + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      resize.releaseCapture && resize.releaseCapture();
    };
    resize.setCapture && resize.setCapture();
    return false;
  };
}
//上中下拖动改变上中下三个模块的高度
export function dragThreeBoxColDiv(
  contentId,
  topBoxId,
  resizeOne,
  centerBoxId,
  resizeTwo,
  downBoxId
) {
  let resizeO = document.getElementById(resizeOne);
  let resizeT = document.getElementById(resizeTwo);
  let topBox = document.getElementById(topBoxId);
  let downBox = document.getElementById(downBoxId);
  let centerBox = document.getElementById(centerBoxId);
  let box = document.getElementById(contentId);
  resizeO.onmousedown = function (e) {
    let startY = e.clientY;
    resizeO.top = resizeO.offsetTop;
    document.onmousemove = function (e) {
      let endY = e.clientY;
      let moveLen = resizeO.top + (endY - startY);
      let downH = downBox.offsetHeight;
      let maxT = box.clientHeight - resizeO.offsetHeight;
      if (moveLen < 100) moveLen = 100;
      if (moveLen > maxT - 100) moveLen = maxT - 100;
      resizeO.style.top = moveLen;
      topBox.style.height = moveLen + "px";
      centerBox.style.height = box.clientHeight - moveLen - downH - 10 + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      resizeO.releaseCapture && resizeO.releaseCapture();
    };
    resizeO.setCapture && resizeO.setCapture();
    return false;
  };
  resizeT.onmousedown = function (e) {
    let startY = e.clientY;
    resizeT.top = resizeT.offsetTop;
    document.onmousemove = function (e) {
      let endY = e.clientY;
      let topH = topBox.offsetHeight;
      let moveLen = resizeT.top + (endY - startY) - topH;
      let maxT = box.clientHeight - resizeT.offsetHeight; //距顶值
      if (moveLen < 100) moveLen = 100;
      if (moveLen > maxT - topH - 100) moveLen = maxT - topH - 100;
      resizeT.style.top = moveLen;
      centerBox.style.height = moveLen + "px";
      downBox.style.height = box.clientHeight - moveLen - topH - 10 + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      resizeT.releaseCapture && resizeT.releaseCapture();
    };
    resizeT.setCapture && resizeT.setCapture();
    return false;
  };
}

vue 单个拖动demo页面

<template>
  <div class="all">
    <!-- 左右两行拖动 -->
    <div class="drag-main">
      <h2>两列的左右拖动改变div大小</h2>
      <div id="twoBox" class="drag-two-box">
        <div id="twoleft" class="drag-two-left">左</div>
        <div id="tworesize" class="drag-two-resize"></div>
        <div id="tworight" class="drag-two-right"></div>
      </div>
    </div>
    <!-- 左右三行拖动 -->
    <div class="drag-main">
      <h2>三列的左右拖动改变div大小</h2>
      <ul id="contentId" class="content">
        <li id="leftId" class="left">左</li>
        <li id="resizeOne" class="l-resize"></li>
        <li id="centerId" class="center"></li>
        <li id="resizeTwo" class="l-resize"></li>
        <li id="rightId" class="right">右</li>
      </ul>
    </div>
    <!-- 两行上下拖动 -->
    <div class="drag-main">
      <h2>两行的上下拖动改变div大小</h2>
      <div id="mainId" class="main">
        <div id="topBoxId" class="topBox">中上</div>
        <div id="resizeId" class="r-resize"></div>
        <div id="downBoxId" class="downBox">中下</div>
      </div>
    </div>
    <!-- 三行上下拖动 -->
    <div class="drag-main">
      <h2>三列的上下拖动改变div大小</h2>
      <div id="thirdId" class="boxmain">
        <div id="leftboxId" class="left">左</div>
        <div id="resizeboxOne" class="l-resize"></div>
        <div id="centerboxId" class="center">中</div>
        <div id="resizeboxTwo" class="l-resize"></div>
        <div id="rightboxId" class="right">右</div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  dragTwoColDiv,
  dragThreeColDiv,
  dragTwoRowDiv,
  dragThreeBoxColDiv
} from "./test";
export default {
  data() {
    return {};
  },
  mounted() {
    dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight");
    dragThreeColDiv(
      "contentId",
      "leftId",
      "resizeOne",
      "centerId",
      "resizeTwo",
      "rightId"
    );
    dragTwoRowDiv("mainId", "topBoxId", "resizeId", "downBoxId");
    dragThreeBoxColDiv(
      "thirdId",
      "leftboxId",
      "resizeboxOne",
      "centerboxId",
      "resizeboxTwo",
      "rightboxId"
    );
  }
};
</script>
<style lang="scss" scoped>
/*两列 */
#twoBox {
  display: flex;
}
#twoleft {
  width: calc(20% - 10px);
}
#tworesize {
  width: 5px;
  cursor: w-resize;
}
#tworight {
  width: 80%;
}
/* 三列 */
#contentId {
  display: flex;
}
#leftId {
  width: calc(20% - 10px);
}
#resizeOne {
  width: 5px;
  cursor: w-resize;
}
#centerId {
  width: 60%;
}
#resizeTwo {
  width: 5px;
  cursor: w-resize;
}
#rightId {
  width: 20%;
}

/* 两横 */
#mainId {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#topBoxId {
  height: calc(80% - 5px);
}
#resizeId {
  height: 5px;
  cursor: s-resize;
}
#downBoxId {
  height: 20%;
}
/* 三横 */
#thirdId {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#leftboxId {
  height: 60%;
}
#resizeboxOne {
  height: 5px;
  cursor: s-resize;
}
#centerboxId {
  height: calc(20% - 10px);
}
#resizeboxTwo {
  height: 5px;
  cursor: s-resize;
}
#rightboxId {
  height: 20%;
}
// 辅助修饰
.all {
  padding: 30px;
  list-style: none;
}
.drag-main {
  margin-bottom: 30px;
  h2 {
    margin-bottom: 30px;
  }
}
.drag-two-box {
  // width: 100%;
  display: flex;
  .drag-two-left {
    background: #1ee3aa;
    height: 100px;
  }
  .drag-two-right {
    background: #eb77eb;
  }
  .drag-two-resize {
    width: 5px;
    cursor: w-resize;
    background: #000;
  }
}

ul.content {
  // width:100%;
  display: flex;
  overflow: hidden;
  li {
    // float: left;
    height: 100px;
    list-style-type: none;
  }
  .left {
    background: red;
  }
  .center {
    background: #16ffa6;
    padding: 30px;
    box-sizing: border-box;
  }
  .right {
    background: orange;
  }
  .l-resize {
    background: #000;
  }
}
.main {
  height: 300px;
  .topBox {
    background: #1ee3aa;
  }
  .r-resize {
    background: #000;
  }
  .downBox {
    background: #eb77eb;
  }
}
.boxmain {
  height: 600px;
  .left {
    background: red;
  }
  .center {
    background: #16ffa6;
    padding: 30px;
    box-sizing: border-box;
  }
  .right {
    background: orange;
  }
  .l-resize {
    background: #000;
  }
}
</style>



## vue 联动demo
```javascript

<template>
  <div class="all">
    <div class="drag-main">
      <h2>拖动改变div</h2>
      <div id="twoBox" class="drag-two-box">
        <div id="twoleft" class="drag-two-left">左</div>
        <div id="tworesize" class="drag-two-resize"></div>
        <div id="tworight" class="drag-two-right">
          <div class="drag-contain">
            <div id="thirdId" class="boxmain">
              <div id="leftboxId" class="left">上</div>
              <div id="resizeboxOne" class="l-resize"></div>
              <div id="centerboxId" class="center">中</div>
              <div id="resizeboxTwo" class="l-resize"></div>
              <div id="rightboxId" class="right">下</div>
            </div>
          </div>
          <div style="width: 20%; height: 100%; background: blue; float: left"></div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import { dragTwoColDiv, dragThreeBoxColDiv } from "./test";
export default {
  data() {
    return {};
  },
  mounted() {
    window.oncontextmenu = function() {
      event.preventDefault();
    };
    dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight");
    dragThreeBoxColDiv(
      "thirdId",
      "leftboxId",
      "resizeboxOne",
      "centerboxId",
      "resizeboxTwo",
      "rightboxId"
    );
  }
};
</script>
  <style lang="scss" scoped>
/*两列 */
#twoBox {
  display: flex;
}
#twoleft {
  width: calc(20% - 10px);
}
#tworesize {
  width: 5px;
  cursor: w-resize;
}
#tworight {
  height: 100vh;
  width: 80%;
}

/* 三横 */
#thirdId {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#leftboxId {
  height: 60%;
}
#resizeboxOne {
  height: 5px;
  cursor: s-resize;
}
#centerboxId {
  height: calc(20% - 10px);
}
#resizeboxTwo {
  height: 5px;
  cursor: s-resize;
}
#rightboxId {
  height: 20%;
}
// 辅助修饰
.all {
  padding: 30px;
  list-style: none;
}
.drag-main {
  margin-bottom: 30px;
  h2 {
    margin-bottom: 30px;
  }
}
.drag-contain {
  height: 98%;
  width: 80%;
  float: left;
  margin-bottom: 30px;
  h2 {
    margin-bottom: 30px;
  }
}
.drag-two-box {
  // width: 100%;
  display: flex;
  .drag-two-left {
    background: #1ee3aa;
    height: 100vh;
  }
  .drag-two-right {
    background: #eb77eb;
  }
  .drag-two-resize {
    width: 5px;
    cursor: w-resize;
    background: #000;
  }
}

.boxmain {
  height: 800px;
  .left {
    background: red;
  }
  .center {
    background: #16ffa6;
    padding: 30px;
    box-sizing: border-box;
  }
  .right {
    background: orange;
  }
  .l-resize {
    background: #000;
  }
}
</style>
  借鉴链接
aCknow
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3实现div拖拽改变宽高
倚栏听风
10-08 1349
拖拽改变div宽高
vue 检测用户上传图片宽高的方法
10-15
主要介绍了vue 检测用户上传图片宽高的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3中div自由拖拽宽度和高度
最新发布
liuzaixi的博客
02-22 343
Vue3中我们会遇到自由拖拽宽度和高度的页面需求，查看很多方法都无法满足当前需求。下面是我们Vue3版本的代码，非常简单主要构想说粗发拖拽方法，把所需要的div的高宽进行拖拽位置进行监听来加减自身div的px值。直接复制粘贴就可以实现效果。根据自己需求更改即可投入使用，非常方便快捷。
左右两栏布局右侧自适应+左右拖动改变两栏宽度
12-13
今天一下午的学习成果，分享一下，欢迎高手指教。 首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>左右两栏拖动改变宽度</title> </head
vue拉伸div边框加高div 类似于浏览器F12控制台那样的拉高效果
VastWu的博客
09-26 1068
vue拉伸div边框加高div 类似于浏览器F12控制台那样的拉高效果 直接上代码了 复制过去即可使用 <template> <div> <div id="app"> <div class="box-bottom" ref="drag_box" :style="'height:'+realBoxHeight+'px'" @mouseup="mouseUpHandleelse($event)"> <div
Vue div拖拉高度
weixin_42651014的博客
04-14 1058
Vue div拖拉高度vue拖动改变div高度 vue拖动改变div高度 <template> <div> <div :style="{height: tableHeight + 'px',width:'100%',background: '#ab1236'}"></div> <div id="touchmove" style="width: 100%;margin-top:5px;ma
Vue Dialog弹窗拖拽功能 可拉伸调整大小 双击全屏
瘾丶病的博客
12-10 3301
Vue Dialog弹窗拖拽功能 可拉伸调整大小 双击全屏。
vue实现拖拽边框改变元素宽度
weixin_42936768的博客
10-09 1263
如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。如果没有设置position，元素找不到。建立一个父子节点，父级元素必须是定位元素，设置样式如下。：设置鼠标捕获(之后的事件捕获会作用在当前元素上)代表距离当前元素最近的。
记录--vue 拉伸指令
林恒的博客
08-30 578
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 在我们项目开发中,经常会有布局拉伸的需求,接下来 让我们一步步用 vue指令 实现这个需求 动手开发 在线体验 codesandbox.io/s/dawn-cdn-… 常规使用 解决拉伸触发时机 既然我们使用了指令的方式,也就是牺牲了组件方式的绑定事件的便捷性. 那么我们如何来解决这个触发时机的问题呢? 在参考了 Eleme...
vue3 使用vue3-draggable-resizable实现 拉伸，拖拽
weixin_68245816的博客
12-06 1611
v-model:x=""//组件距离父容器的左侧的距离（px）v-model:y=""//组件距离父容器的左侧的距离（px）v-model:active=""//是否激活。:resizable=""//是否可改变大小。v-model:w=""//容器宽度高度。:draggable=""//是否可拖动。:parent=""//能否超出父容器。v-model:h=""//容器。:initH=""//初始高度。:initW=""//初始宽度。1.全局引入 main.js。2.局部引入 组件.vue。
Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸
liuyingxiu1的博客
07-09 3163
Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸引言页面布局drag.js文件弹窗拖拽实现及边界限制插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 引言 近期公司vue前端项目需求：实现弹窗的拖拽，四边拉伸及对角线拉伸，以及弹窗边界处理。本人使用vue的自定义指令编写了drag.js文件
vue实现div拖拽互换位置
01-19
本文实例为大家分享了vue实现div拖拽互换位置的具体代码，供大家参考，具体内容如下 template模板 <transition tag=div class=container> <div class=item v-for=(item,index) in items :key=item.key :style=...
vue实现div单选多选功能
01-19
vue实现div单选多选功能，供大家参考，具体内容如下 单选 单选： 多选： 单选功能 DOM层： <div class=labeloption class={checked:ageActive click=changeStatus(11)>0-16岁</div> <div class=labeloption ...
vue实现div可拖动位置也可改变盒子大小的原理
10-14
主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
解决vue项目获取dom元素宽高总是不准确问题
10-15
主要介绍了解决vue项目获取dom元素宽高总是不准确问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
div自动拉伸
Happy_Girl2012的专栏
12-02 773
div可拉伸
使用vue3实现一个可以上下拖动更换位置的列表,可以用哪些插件或者方法
weixin_42164352的博客
04-12 1003
以上两种方法都可以实现可以上下拖动更换位置的列表，选择使用哪一种取决于具体需求和个人喜好。在Vue3中，可以使用Vue的内置指令。来渲染一个列表，并使用Vue的内置指令。
vue 展开收起（高度不固定，还要有平滑的过渡效果）
fengxiaopeng74的博客
02-04 4813
找了好多案例都不是很顺滑，最终还是功夫不负有心人，找到了一个非常棒的案例，只是简单地尝试一下，以后使用可以在进行全面的封装来公共使用 <template> <div class="panel"> <!-- body --> <transition name="panel-fade" @enter="enter" @before-leave="beforeLeave" @leave="leave"> <div cla..
vue中自定义缩放，改变容器宽度
nice_travel的博客
06-08 2349
vue中使用了源代码编辑器-codemirror，但是该组件无法自由缩放改变容器宽度，因此自己写了一段，主要代码如下： onChaneWidth: function () { let resize = this.$refs.resize let left = this.$refs.leftConcent let right = this.$refs.rightConcent resize.onmousedown = function (e) {
vue 自定义指令div拉伸
10-15
可以通过自定义指令来实现 div 拉伸的效果。具体实现步骤如下： 1. 在 Vue 中定义一个自定义指令，例如 v-resize。 2. 在自定义指令的 bind 钩子函数中，给目标元素绑定 mousedown 事件，记录下鼠标按下时的位置和目标元素的初始宽高。 3. 在 document 上绑定 mousemove 和 mouseup 事件，分别对应拖动和停止拖动的操作。 4. 在 mousemove 事件中，计算出鼠标移动的距离，根据距离调整目标元素的宽高。 5. 在 mouseup 事件中，解绑 document 上的事件。 下面是一个简单的示例代码： ```javascript Vue.directive('resize', { bind(el) { let startX, startY, startWidth, startHeight; el.addEventListener('mousedown', e => { startX = e.clientX; startY = e.clientY; startWidth = el.offsetWidth; startHeight = el.offsetHeight; document.addEventListener('mousemove', resize); document.addEventListener('mouseup', stopResize); }); function resize(e) { const width = startWidth + e.clientX - startX; const height = startHeight + e.clientY - startY; el.style.width = `${width}px`; el.style.height = `${height}px`; } function stopResize() { document.removeEventListener('mousemove', resize); document.removeEventListener('mouseup', stopResize); } } }); ``` 使用时，在需要拉伸的 div 上添加 v-resize 指令即可： ```html <div v-resize>可以拉伸的 div</div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值