如何拖动div来调整大小

Question

我有2个垂直div并且我希望用户能够从底角调整div的大小。

以下代码不能正常工作

＆＃13;

＆＃13;

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        bottom = $('#bottom_panel'),
        top = $('#top_panel'),
        handle = $('#drag');

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

    $(document).on('mousemove', function (e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing) 
            return;
        
        var offsetTop = container.height() - (e.clientY - container.offset().top);

        bottom.css('top', offsetTop);
        top.css('height', offsetTop);
    }).on('mouseup', function (e) {
        // stop resizing
        isResizing = false;
    });
});

＆＃13;

body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

#container {
	width: 100%;
	height: 100%;
	
}

#bottom_panel {
	position:relative;
	background: grey;
	width:100%;
	height:70vh;
	overflow:hidden;
}

#top_panel {
	width: 100%;
	height:30vh;
	color:#fff;
	background: black;
	overflow:hidden;
}

#drag {
	position: absolute;
	left: 50%;
	right:0;
	transform:translateX(-50%);
	top: -4px;
	width: 8px;
	cursor: pointer;
	width:10px;
	height:20px;
	background:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
	<div id="top_panel">
		Lorem ipsum dolor sit amet
	</div>
	<div id="bottom_panel"> 
		<div id="drag"></div> 
		Lorem ipsum dolor sit amet
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;