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>
借鉴链接