ConstructionCost/public/web/slideResize.js

'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}
})();