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.get