js實現兩個並列的div大小動態改變

HTML代碼

<div  class="modal-body"
				  style="width:100%; overflow: auto;margin: 0;">
				<div id="main" class="col-xs-12">
					<div id="menu" class="col-xs-6"
						 style="border: 1px solid #ccc; height: 400px; overflow: scroll;">
					</div>
					<div  id="codecontainer" class="col-xs-6"
						  style="border: 1px solid #ccc; height: 400px; overflow: scroll;">
					</div>
				</div>
			</div>

JS代碼

$(function(){
		var o = document.getElementById("main");
		main = o.clientWidth||o.offsetWidth;

		o2 = document.getElementById("codecontainer");
		var codecontainer = o2.clientWidth||o2.offsetWidth;

		//綁定需要拖拽改變大小的元素對象
		bindResize(document.getElementById('menu'));
	});

$(function(){
		var o = document.getElementById("main");
		main = o.clientWidth||o.offsetWidth;

		o2 = document.getElementById("codecontainer");
		var codecontainer = o2.clientWidth||o2.offsetWidth;

		//綁定需要拖拽改變大小的元素對象
		bindResize(document.getElementById('menu'));
	});

function bindResize(el) {
		//初始化參數
		var els = el.style,
				//鼠標的 X 軸座標
				x =0;
		//按下鼠標
		$(el).mousedown(function (e) {
			//按下元素後，計算當前鼠標與對象計算後的座標
			x = e.clientX - el.offsetWidth,
					//在支持 setCapture 做些東東
					el.setCapture ? (
							//捕捉焦點
							el.setCapture(),
									//設置事件
									el.onmousemove = function (ev) {
										mouseMove(ev || event)
									},
									el.onmouseup = mouseUp
					) : (
							//綁定事件
							$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
					)
			//防止默認事件發生
			e.preventDefault()
		});

		//移動事件
		function mouseMove(e) {
			//運算中...
			var elsWidth = e.clientX - x;
			if (elsWidth > 800){
				elsWidth =800;
			}
			if (elsWidth < 400){
				elsWidth =400;
			}
			els.width = elsWidth + 'px';
			var rightWidth =main-elsWidth-31;
			o2.style.width = rightWidth + 'px';
		}

		//停止事件
		function mouseUp() {
			//在支持 releaseCapture 做些東東
			el.releaseCapture ? (
					//釋放焦點
					el.releaseCapture(),
							//移除事件
							el.onmousemove = el.onmouseup = null
			) : (
					//卸載事件
					$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
			)
		}
	}

參考原文