'use strict'; /** * * * @author Zhong * @date 2018/11/7 * @version */ /* * div之间的水平拖动,适应各种情况 * module: 所属模块,防止不同页面相同id导致localstorage数据被覆盖 * eleObj: resize, parent, left, right * limit: min, max * */ const SlideResize = (function() { //设置水平拖动条的宽度 //@param {Object dom}resize滚动条 function setResizeWidth (resize) { const fixedWidth = 10; //滚动条节点 及 同层非滚动条节点的索引 let bros = resize.parent().children(); let index = bros.index(resize), otherIndex = index ? 0 : 1; const other = resize.parent().children(`:eq(${otherIndex})`); let resizeParentWidth = resize.parent().width(); let resizeDecimalWidth = fixedWidth / resizeParentWidth, otherDecimalWidth = 1 - resizeDecimalWidth; let resizePercentWidth = resizeDecimalWidth * 100 + '%', otherPercentWidth = otherDecimalWidth * 100 + '%'; resize.css('width', resizePercentWidth); other.css('width', otherPercentWidth); } let mouseMoveCount = 0; function horizontalSlide(module, eleObj, limit, callback) { const triggerCBSize = 5; let drag = false, startPoint = 0, leftWidth = 0, rightWidth = 0, leftChange = 0, rightChange = 0, limitMax = 0; eleObj.resize.mousedown(function (e) { drag = true; startPoint = e.clientX; leftWidth = eleObj.left.width(); rightWidth = eleObj.right.width(); limitMax = eval(limit.max); }); $('body').mousemove(function (e) { if (drag) { let moveSize = e.clientX - startPoint; leftChange = leftWidth + moveSize; leftChange = leftChange < limit.min ? limit.min : leftChange; leftChange = leftChange > limitMax ? limitMax - 3 : leftChange; rightChange = rightWidth - moveSize; rightChange = rightChange < limit.min ? limit.min : rightChange; rightChange = rightChange > limitMax ? limitMax - 3 : rightChange; let leftPercentWidth = leftChange / eleObj.parent.width() * 100 + '%', rightPercentWidth = rightChange / eleObj.parent.width() * 100 + '%'; eleObj.left.css('width', leftPercentWidth); eleObj.right.css('width', rightPercentWidth); setResizeWidth(eleObj.resize); mouseMoveCount += Math.abs(moveSize); if (mouseMoveCount > triggerCBSize && callback) { callback(); mouseMoveCount = 0; } } }); $('body').mouseup(function (e) { if (drag) { drag = false; mouseMoveCount = 0; //将宽度信息存储到localstorage let leftWidthInfo = eleObj.left[0].style.width; setLocalCache(`${module}${eleObj.left.attr('id')}Width`, leftWidthInfo); let rightWidthInfo = eleObj.right[0].style.width; setLocalCache(`${module}${eleObj.right.attr('id')}Width`, rightWidthInfo); } }); } function loadHorizonWidth(module, resizes, eles, callback) { for (let ele of eles) { let cache = getLocalCache(`${module}${ele.attr('id')}Width`); if (cache) { ele.css('width', cache); } } for (let resize of resizes) { setResizeWidth(resize); } if (callback) { callback(); } } /* * div上下拖动 * module: 所属模块,防止不同页面相同id导致localstorage数据被覆盖 * eleObj: resize, top, topSpread, bottom, bottomSpread * limit: min, max, notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度) * */ function verticalSlide(module, eleObj, limit, callback) { const triggerCBSize = 5; let drag = false, startPoint = 0, topHeight = 0, bottomHeight = 0, topChange = 0, bottomChange = 0, limitMax = 0; eleObj.resize.mousedown(function (e) { drag = true; startPoint = e.clientY; topHeight = eleObj.top.height(); bottomHeight = eleObj.bottom.height(); limitMax = eval(limit.max); }); $('body').mousemove(function (e) { if (drag) { let moveSize = e.clientY - startPoint; topChange = topHeight + moveSize; topChange = topChange < limit.min ? limit.min : topChange; topChange = topChange > limitMax ? limitMax - 3 : topChange; bottomChange = bottomHeight - moveSize; bottomChange = bottomChange < limit.min ? limit.min : bottomChange; bottomChange = bottomChange > limitMax ? limitMax - 3 : bottomChange; //设置上部分div高度 eleObj.top.height(topChange); //设置上部分div内spread高度 eleObj.topSpread.height(topChange - limit.notTopSpread); //设置下部分div高度 eleObj.bottom.height(bottomChange); //设置下部分div内spread高度 eleObj.bottomSpread.height(bottomChange - limit.notBottomSpread); mouseMoveCount += Math.abs(moveSize); if (mouseMoveCount > triggerCBSize && callback) { callback(); mouseMoveCount = 0; } } }); $('body').mouseup(function (e) { if (drag) { drag = false; mouseMoveCount = 0; //将高度信息存储到localstorage let topHeightInfo = eleObj.top.height(); setLocalCache(`${module}${eleObj.top.attr('id')}Height`, topHeightInfo); let bottomHeightInfo = eleObj.bottom.height(); setLocalCache(`${module}${eleObj.bottom.attr('id')}Height`, bottomHeightInfo); } }); } /* * 加载上下高度 * module: 所属模块,防止不同页面相同id导致localstorage数据被覆盖 * eleObj: top, topSpread, bottom, bottomSpread * limit: totalHeight(实时的上下部分总高度) notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度) * */ function loadVerticalHeight(module, eleObj, limit, callback) { let topHeight = getLocalCache(`${module}${eleObj.top.attr('id')}Height`), bottomHeight = getLocalCache(`${module}${eleObj.bottom.attr('id')}Height`); //默认上下比例 const topProp = 5; const bottomProp = 2; let topProportion = topProp / (topProp + bottomProp); if (topHeight !== null && bottomHeight !== null) { topHeight = parseFloat(topHeight); bottomHeight = parseFloat(bottomHeight); topProportion = topHeight / (topHeight + bottomHeight); } //设置当前窗口下的的上下部分高度 let totalHeight = eval(limit.totalHeight); let curTopHeight = totalHeight * topProportion, curBottomHeight = totalHeight - curTopHeight; eleObj.top.height(curTopHeight); eleObj.topSpread.height(curTopHeight - limit.notTopSpread); eleObj.bottom.height(curBottomHeight); eleObj.bottomSpread.height(curBottomHeight - limit.notBottomSpread); if (callback) { callback(); } } return {horizontalSlide, loadHorizonWidth, verticalSlide, loadVerticalHeight} })();