拖拽控制页面宽度

<div id="wrapper">
	<div id="left">
		左侧
		<span id="drag"></span>
	</div>
	<div id="right">
		<table border="" cellspacing="" cellpadding="" >
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
		</table>
	</div>
</div>

#wrapper{
	width: 900px;
	height: 400px;
	border: 1px solid #000;
	display: flex;
}

#left{
	width: 300px;
	height: 400px;
	border: 1px solid #0000FF;
	background: cyan;
	position: relative;
}


#drag{
	width: 10px;
	height: 100px;
	background: #000;
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	cursor: e-resize;
}

#left:hover #drag{
	display: block;
}

#right{
	width: 600px;
	height: 400px;
	border: 1px solid #3C6E31;
	background: #EB7350;
	overflow-x: auto;
}

#right table{
	width: 600px;
	border-collapse:collapse ;
}

<script type="text/javascript">
	var leftCon = document.getElementById("left")
	var drag = document.getElementById("drag")
	
	leftCon.onmousedown = function(e){
		if(e.button !== 0 ){//如果不是鼠标左键
			return;
		}
		var downX = e.pageX;
		var leftConStyle = getComputedStyle(leftCon);
		var leftConWidth = parseFloat(leftConStyle.width);
		
		window.onmousemove = function(e){
			var moveX = e.pageX - downX;
			leftCon.style.width = leftConWidth + moveX +'px';
			var newLeftConWidth = parseFloat(leftConStyle.width);
			
			if(newLeftConWidth >= 400){
				leftCon.style.width = '400px';
			}
			
			if(newLeftConWidth <= 300){
				leftCon.style.width = '300px';
			}
		}
		window.onmouseup = window.onmouseleave = function(e){
			if(e.button === 0 ){
				window.onmousemove = null;
			}
		}
	}
</script>