vue左右移动div
作者：互联网
https://www.jianshu.com/p/0ee2642aba82
// 两列拖动改变两列宽度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;
}
}
vue部分
<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>
</template>
<script>
import { dragTwoColDiv, dragThreeColDiv, dragTwoRowDiv } from "@/xxxxx";
export default {
data() {
return {};
},
mounted() {
dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight");
dragThreeColDiv("contentId","leftId","resizeOne","centerId","resizeTwo","rightId");
dragTwoRowDiv("mainId", "topBoxId", "resizeId", "downBoxId");
}
};
</script>
css部分
<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%;
}
// 辅助修饰
.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;
}
}
</style>
标签：function,vue,移动,width,let,div,moveLen,document,resize 来源： https://www.cnblogs.com/zjxzhj/p/15172148.html