staghrm6/public/v-splitter-px/v-splitter.js

function initVSplitter(_name, _left, _right, _alignTo = null) {

    var minSplitWidth = 300;

    if($('.v-split[data-name="' + _name + '"]').length) return;

    if(localStorage['v-split-rounded-' + _name]) {
        var tempFinalLeft = Math.round(parseFloat(localStorage['v-split-rounded-' + _name]));
        _left.css({flex: '0 0 ' + tempFinalLeft + '%'});
        _right.css({flex: '0 0 ' + (100 - tempFinalLeft) + '%'});
        $(document).trigger('v-splitter-change');
    }

    var origLeft = -1, finalLeft = -1, origX = -1, vMoving = false, totalWidth = _left.parent().width();
    _left.parent().css({position: 'relative'});
    _left.addClass('v-split-panel').css({maxWidth: 'unset', minWidth: 'unset'});
    _right.addClass('v-split-panel').css({maxWidth: 'unset', minWidth: 'unset'});
    const vSplit = $('<div/>').addClass('v-split').attr('data-name', _name).insertAfter(_left);

    function _setSplitterHeight() {
        if(!_alignTo) return;
        vSplit.css({marginTop: (_alignTo.position().top + 'px'), height: (_alignTo.outerHeight())});
    }
    _setSplitterHeight();

    vSplit.css({left: (_left.outerWidth() * 100 / totalWidth) + '%'})
        .off('mousedown.' + _name).on('mousedown.' + _name, function(_e) {
            totalWidth = _left.parent().width();
            origLeft = finalLeft = vSplit.position().left;
            origX = _e.screenX;
            vMoving = true;
            $('body').addClass('v-moving');
            $(this).addClass('v-split-active');
            return false;
        });

    $(document)
        .off('mousemove.' + _name).on('mousemove.' + _name, function(_e) {
            if(!vMoving) return;
            var tempFinalLeft = origLeft + (_e.screenX - origX);
            if(tempFinalLeft < minSplitWidth || tempFinalLeft > (totalWidth - minSplitWidth)) return;
            finalLeft = tempFinalLeft;
            vSplit.css({left: ((tempFinalLeft * 100) / totalWidth) + '%'});
        })
        .off('mouseup.' + _name).on('mouseup.' + _name, function(_e) {
            if(!vMoving) return;
            vMoving = false;
            $('body').removeClass('v-moving');
            var tempFinalLeft = ((_left.outerWidth() + (finalLeft - origLeft)) * 100 / totalWidth);
            tempFinalLeft = Math.round(tempFinalLeft);
            _left.css({flex: '0 0 ' + tempFinalLeft + '%'});
            vSplit.css({left: tempFinalLeft + '%'}) // (_left.outerWidth() * 100 / totalWidth) + '%'})
            _right.css({flex: '0 0 ' + (100 - tempFinalLeft) + '%'});
            $('.v-split-active').removeClass('v-split-active');
            localStorage['v-split-rounded-' + _name] = tempFinalLeft;
            $(document).trigger('v-splitter-change');
        });

    $(window).off('resize.' + _name).on('resize.' + _name, function(_e) { _setSplitterHeight(); });
    $(window).off('scroll.' + _name).on('scroll.' + _name, function(_e) { _setSplitterHeight(); });
}