Calculation/app/public/js/div_resizer.js

'use strict';

/**
 *
 * div可拖动调整分栏
 *
 * 示例结构：
 * <div id="top-div"></div>
 * <div r-Type="height|width" div1="#top-div" div2="#bottom-div" store-id="XXX" store-version="1.0.0" min="100">
 * <div id="bottom-div"></div>
 *
 * 其中：
 * r-Type: height表示上下拖动调整, width表示左右拖动调整
 * div1: 上（左）部结构的id
 * div2: 下（右）部结构的id
 * store-id：可选，存在则以该值生成key，将调整结果写入localStorage
 * min: 可选，无则默认两部分结构相加的10%
 *
 * setting: {select, callback}
 * 其中：
 * select：选定分栏
 * callback：回调（除了上述两个div外需要调整的，自定义放在此处）
 *
 * @author Mai
 * @date 2019/3/15
 * @version
 */

(function($){
    $.divResizer = function(setting) {
        const obj = $(setting.select);
        let drag, mouseMoveCount, startPos, orgSize1, orgSize2, newSize1, newSize2, objSize;
        // if (obj.attr('r-type') === 'height') {
        //     obj.css('width', '100%').css('height', '1%').css('resize', 'vertical').css('cursor', 's-resize').css('float', 'top');
        // } else {
        //     obj.css('width', '1%').css('height', '100%').css('resize', 'horizontal').css('cursor', 'w-resize').css('float', 'left');
        // }
        // 根据localStorage初始化

        const refreshDivSize = function() {
            const rType = obj.attr('r-type'), aType = obj.attr('a-type');
            const div1 = $(obj.attr('div1')), div2 = $(obj.attr('div2'));
            const parent = div1.parent();
            if (aType !== 'percent') {
                orgSize1 = div1[rType]();
                orgSize2 = div2[rType]();
                const parentSize = parent[rType]() * 0.99;
                const size1 = Math.floor(orgSize1 / (orgSize1 + orgSize2) * parentSize);
                const size2 = Math.floor(parentSize - size1);

                div1[rType](size1);
                div2[rType](size2);
            }
            if (setting.callback) { setting.callback(); }
        };

        if (obj.attr('store-id')) {
            const rType = obj.attr('r-type'), version = obj.attr('store-version') ? ('-'+obj.attr('store-version')) : '' ;
            const objSize1 = getLocalCache('v-resize-1-' + obj.attr('store-id') + version);
            if (objSize1) {
                $(obj.attr('div1')).css(rType, objSize1);
            }
            const objSize2 = getLocalCache('v-resize-2-' + obj.attr('store-id') + version);
            if (objSize2) {
                $(obj.attr('div2')).css(rType, objSize2);
            }
            refreshDivSize();
            if (setting.callback) { setting.callback(); }
        }

        obj.mousedown(function (e) {
            const rType = obj.attr('r-type');
            mouseMoveCount = 0;
            drag = true;
            startPos = rType === 'height' ? e.clientY : e.clientX;
            // 获取左(上)部分的宽度(高度)
            orgSize1 = $($(this).attr('div1'))[rType]();
            // 获取右(下)部分的宽度(高度)
            orgSize2 = $($(this).attr('div2'))[rType]();
            // nav宽(高度)部分
            objSize = $(this)[rType]();
            //resizeElement.tooltip('hide');

        });
        $('body').mousemove(function (e) {
            if (drag) {
                const rType = obj.attr('r-type'), aType = obj.attr('a-type');
                const moveSize = rType === 'height' ? e.clientY - startPos : e.clientX - startPos;
                //实时刷新页面
                mouseMoveCount += moveSize;
                //当累计移动超过5个像素时，才刷新，减少刷新次数
                if(Math.abs(mouseMoveCount) >= 5){
                    if (aType === 'percent') {
                        const min = obj.attr('min') ? obj.attr('min') : 10;
                        const max = 99 - min;

                        const percent1 = Math.min(Math.max((orgSize1 + moveSize) / (orgSize1 + orgSize2) * 100, min), max);
                        $(obj.attr('div1')).css(rType, percent1 + '%').attr('dr-' + rType, percent1+'%');
                        const percent2 = Math.min(Math.max((orgSize2 - moveSize) / (orgSize1 + orgSize2) * 100, min), max);
                        $(obj.attr('div2')).css(rType, percent2 + '%').attr('dr-' + rType, percent2+'%');
                    } else {
                        const min = obj.attr('min') ? obj.attr('min') : parseInt(((orgSize1 + orgSize2) / 10).toFixed(0));
                        const max = orgSize1 + orgSize2 - min;

                        // 判断拖动范围不能超出
                        newSize1 = Math.min(Math.max(orgSize1 + moveSize, min), max);
                        newSize2 = Math.min(Math.max(orgSize2 - moveSize, min), max);

                        $(obj.attr('div1'))[rType](newSize1);
                        $(obj.attr('div2'))[rType](newSize2);
                    }

                    if(setting.callback) setting.callback();
                    mouseMoveCount = 0;
                }
            }
        });
        $('body').mouseup(function () {
            if (drag) {
                drag = false;
                const rType = obj.attr('r-type'), aType = obj.attr('a-type');
                const localId = obj.attr('store-id'), version = obj.attr('store-version') ? ('-'+obj.attr('store-version')) : '' ;
                const div1 = $(obj.attr('div1')), div2 = $(obj.attr('div2'));
                if (aType === 'percent') {
                    setLocalCache('v-resize-1-' + localId + version, div1.attr('dr-' + rType));
                    setLocalCache('v-resize-2-' + localId + version, div2.attr('dr-' + rType));
                } else {
                    setLocalCache('v-resize-1-' + localId + version, div1[rType]());
                    setLocalCache('v-resize-2-' + localId + version, div2[rType]());
                }
            }
        });

        return { refreshDivSize };
    }
})(jQuery);