SOURCE

var isResizing = false;
var lastDownX = 0;

$(function () {
    var container = $('#container.resizable');
    // 根据当前窗口大小设定 container 的高度
    container.css({ 'height': ($(window).height() - 20), 'opacity': 1 });

    var left = $('#left');
    var right = $('#right');
    var resizor = $('#resizor');

    resizor.on('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on('mousemove', function (e) {
        if (!isResizing) return true;
        var offsetRight = container.width() - (e.clientX - container.offset().left);
        if(offsetRight<200){
                offsetRight=200
            }
            if(offsetRight>600){
                offsetRight=600
            }
        // 判断左右拖动范围
        if (offsetRight < 0 || offsetRight >= container.width()) {
            isResizing = false;
            return true;
            
        }
        left.css('right', offsetRight);
        resizor.css('right', offsetRight);
        right.css('width', offsetRight);
    }).on('mouseup', function (e) {
        isResizing = false;
    });
});

<div id="container" class="resizable">
	<!-- Left side -->
	<div id="left">
		<p>左侧内容</p>
	</div>
	<div id="resizor" title="拖动我"></div>
	<!-- Right side -->
	<div id="right">
		<p>右侧内容</p>
	</div>
</div>

#container.resizable {
            width: 100%;
            height: 100%;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: moz-none;
            -ms-user-select: none;
            user-select: none;
            position: relative;
            opacity: 0;
        }
        #container.resizable #left {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 85%;
            overflow: hidden;
            background-color: #ccc;
        }
        #container.resizable #right {
            position: absolute;
            right: 0px;
            top: 0px;
            bottom: 0px;
            width: 85%;
            background: #fff;
            padding-left: 4px;
            overflow: hidden;
            background-color: #ddd;
        }
        #container.resizable #resizor {
            position: absolute;
            top: 50%;
            right: 85%;
            cursor: w-resize;
            background-color: #666;
            border-radius: 5px;
            margin-top: -10px;
            width: 6px;
            height: 20px;
            /*background: url('/public/static/admin/images/resize.png') repeat-y;*/
            background-size: cover;
            background-position: center;
            z-index: 99999;
        }