vue 表格左右拖拽调整列宽_基于vue的js拖动改变布局容器的宽高。

1.jpg

公共js部分(一共写了三种，其它的不管是多少都可以跟着这个来写)

因为代码比较多所以建立一个公共的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部分

两列的左右拖动改变div大小

左

右

三列的左右拖动改变div大小

• 左
• 中
• 右

两行的上下拖动改变div大小

中上

中下

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");

}

};

css 部分

/*两列 */

#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;

}

}