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