'use strict'; /** * * * @author Zhong * @date 2018/11/7 * @version */ /* * div之间的水平拖动,适应各种情况 * module: 所属模块,防止不同页面相同id导致localstorage数据被覆盖 * eleObj: resize, parent, left, right * limit: min, max * */ const SlideResize = (function() { 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); 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, eles, callback) { for (let ele of eles) { let cache = getLocalCache(`${module}${ele.attr('id')}Width`); if (cache) { ele.css('width', cache); } } if (callback) { callback(); } } return {horizontalSlide, loadHorizonWidth} })();