'use strict'; /** * * * @author Zhong * @date 2018/10/22 * @version */ let mouseMoveCount = 0; /** * 拖动更改div大小 * * @param {Object} eles - id:存储本地的标记 resize:拖动条 nearElement:左上外层div nearSpread:左上spread farElement:右下外层div evFixedSize:造价书左右拖动用 * @param {Object} limit - min/max * @param {String} type - height/width * @param {function} callback - 成功后执行 * @return {void} */ function slideResize(eles, limit, type, callback) { if(type !== 'height' && type !== 'width'){ return; } //nearElement:左上, farElement:右下 let startP = 0; let drag = false; const resizeElement = eles.resize; const nElement = eles.nearElement; const fElement = eles.farElement; const navContentEle = eles.nav ? eles.nav : null; let nEleSize = 0; let fEleSize = 0; let navSize = 0; let nEleChangeSize = 0; let fEleChangeSize = 0; // 鼠标点下时 resizeElement.mousedown(function(e) { mouseMoveCount = 0; drag = true; startP = type === 'height' ? e.clientY : e.clientX; // 获取左(上)部分的宽度(高度) nEleSize = nElement[type](); // 获取右(下)部分的宽度(高度) fEleSize = fElement[type](); // nav宽(高度)部分 if(navContentEle){ navSize = navContentEle[type]() + 4; } resizeElement.tooltip('hide'); }); // 鼠标移动 $("body").mousemove(function(e) { if (drag) { let moveSize = type === 'height' ? e.clientY - startP : e.clientX - startP; // 判断拖动范围不能超出 nEleChangeSize = nEleSize + moveSize; nEleChangeSize = nEleChangeSize < limit.min ? limit.min : nEleChangeSize; nEleChangeSize = nEleChangeSize > limit.max ? limit.max + 9 : nEleChangeSize; fEleChangeSize = fEleSize - moveSize; fEleChangeSize = fEleChangeSize < limit.min ? limit.min : fEleChangeSize; fEleChangeSize = fEleChangeSize > limit.max ? limit.max + 9 : fEleChangeSize; if(type === 'width'){ if(eles.totalWidth) { nEleChangeSize = nEleChangeSize * eles.totalWidth; fEleChangeSize = fEleChangeSize * eles.totalWidth; } let rePercent = getResizeWidthPercent(nEleChangeSize, fEleChangeSize, eles.totalWidth); eles.nearElement.css(type, rePercent.nearPercent); eles.farElement.css(type, rePercent.farPercent); } else{ eles.nearSpread[type](nEleChangeSize); eles.farSpread[type](fEleChangeSize - navSize); eles.farElement[type](fEleChangeSize); } //实时刷新页面 mouseMoveCount+=Math.abs(moveSize);//取移动的决对值 if(mouseMoveCount >=5){//当累计移动超过5个像素时,才刷新,减少刷新次数 if(callback) callback(); mouseMoveCount = 0; } } }); // 鼠标弹起 $("body").mouseup(function(e) { if (drag) { callback(); drag = false; // 存入本地缓存 const id = eles.id; nEleChangeSize = nEleChangeSize >= limit.max ? limit.max + 9 : nEleChangeSize; fEleChangeSize = fEleChangeSize >= limit.max ? limit.max + 9 : fEleChangeSize; setLocalCache(`near${type}:${id}`, nEleChangeSize); setLocalCache(`far${type}:${id}`, fEleChangeSize); } }); } /** * 读取设置的高度 * * @param {String} tag - 顶层div的id * @param {function} callback - 回调函数 * @return {void} */ function loadSize(eles, type, callback) { let tag = eles.id; if (tag === '') { return; } if(type !== 'height' && type !== 'width'){ return; } let o_nearSize = eles.nearSpread[type](); let o_farSize = eles.farSpread[type](); let nearSize = getLocalCache(`near${type}:${tag}`); let farSize = getLocalCache(`far${type}:${tag}`); if (nearSize === null || farSize === null) { setDefaultSize(tag,eles,type);//zhang 2018-05-21 /* eles.nearSpread[type](o_nearSize); eles.farSpread[type](o_farSize);*/ }else { setSizeWithPercent(tag,eles,nearSize,farSize,type)//zhang 2018-06-04 改成按百分比设置 } if(type === 'width'){//使用百分比 if (eles.totalWidth) { o_nearSize = o_nearSize * eles.totalWidth; o_farSize = o_farSize * eles.totalWidth; } let rePercent = getResizeWidthPercent(nearSize ? nearSize : o_nearSize, farSize ? farSize : o_farSize, eles.totalWidth); eles.nearElement.css(type, rePercent.nearPercent); eles.farElement.css(type, rePercent.farPercent); } callback(); } function getResizeWidthPercent(nearSize, farSize, totalWidth = 1){ const resizeWidth = 6; nearSize = parseFloat(nearSize); farSize = parseFloat(farSize); let nearPercent = (nearSize / (resizeWidth + nearSize + farSize) * totalWidth * 100) + '%'; let farPercent = (farSize / (resizeWidth + nearSize + farSize) * totalWidth * 100) + '%'; return {nearPercent, farPercent}; } function setSizeWithPercent(tag,eles,nearSize,farSize,type) { nearSize = parseFloat(nearSize); farSize = parseFloat(farSize); if(type !== 'width') { let headerHeight = $(".header").height(); let toolsbarHeight = $(".toolsbar").height(); let exand = tag == "#main" ? 1:50; let totalHeight = $(window).height() - headerHeight - toolsbarHeight-exand; const navSize = eles.nav ? eles.nav[type]() + 4 : 0; totalHeight = totalHeight - navSize; nearSize = (nearSize/(nearSize + farSize))* totalHeight; eles.nearSpread[type](nearSize); eles.farSpread[type](totalHeight - nearSize); eles.farElement[type](totalHeight - nearSize + navSize); } } function setDefaultSize(tag,eles,type) { let o_nearSize = 5; let o_farSize = 2; if(type == 'height'){ let headerHeight = $(".header").height(); let toolsbarHeight = $(".toolsbar").height(); let exand = tag == "#main" ? 1:50; let totalHeight = $(window).height() - headerHeight - toolsbarHeight-exand; const navSize = eles.nav ? eles.nav[type]() + 4 : 0; totalHeight = totalHeight - navSize; let nearSize = (o_nearSize/(o_nearSize + o_farSize))* totalHeight; eles.nearSpread[type](nearSize); eles.farSpread[type](totalHeight - nearSize); eles.farElement[type](totalHeight - nearSize + navSize); } }