ドラッグアンドドロップで境界を変更する。

Chrome の拡張作成中に必要になったので。

openspc2の 第五章　クライアントサイドの技術：ドラッグ処理を行う を参考にしました。ありがとうございます。

真ん中のボックスをドラッグする事で上下のボックスの高さが変わります。Fx3.5,Chromeで動作確認。IE7はちょっと変。IE8は見てない。
境界処理が割りと適当。

-- 100120 追記
上へドラッグしたときにずれてたので修正。

以下ソース

<script type="text/javascript">
var maxHeight = 210;
var limit = 10;
var dd_contentsHeight = 100;
var dd_borderHeight = 20;
var dd_contents2Height = maxHeight - dd_contentsHeight;
var dd_contentsTop = 0;
var dd_borderTop = dd_contentsTop + dd_contentsHeight;
var dd_contents2Top = dd_contentsTop + dd_borderHeight + dd_contentsHeight;
// ドラッグ対象オブジェクト情報
dragObj = {
	dragFlag : false,
	offsetY : 0,
	mouseY : 0,
	target : null
}
// イベントハンドラなどを設定
window.onload = function() {
	document.getElementById("dd_contents").style.top = dd_contentsTop + 'px';
	document.getElementById("dd_contents").style.height = dd_contentsHeight + 'px';
	document.getElementById("dd_border").onmousedown = dragStart;
	document.getElementById("dd_border").style.height = dd_borderHeight + 'px';
	document.getElementById("dd_border").style.top = dd_borderTop + 'px';
	document.getElementById("dd_contents2").style.height = dd_contents2Height + 'px';
	document.getElementById("dd_contents2").style.top = dd_contents2Top + 'px';
	window.document.onmousemove = dragProc;
	window.document.onmouseup = dragEnd;
}
// ドラッグ開始処理
function dragStart(evt) {
	if(window.addEventListener) {
		targetElement = evt.target;
	}else{
		targetElement = event.srcElement;
	}
	dragObj.dragFlag = true;
	dragObj.targetObj = targetElement;
	dragObj.offsetY = dragObj.mouseY - parseInt(targetElement.style.top);
	return false;
}
// ドラッグ終了処理
function dragEnd() {
	dragObj.dragFlag = false;
}
// ドラッグ中の処理
function dragProc(evt) {
	var mouseY;
	if (document.all) {
		mouseY = event.y;
	} else {
		mouseY = evt.pageY;
	}
	dragObj.mouseY = mouseY;
	if (!dragObj.dragFlag) {
		return;
	}
	if (parseInt(mouseY - dragObj.offsetY) < dd_contentsTop + limit) {
		dd_contentsHeight  = limit;
		dd_contents2Height = maxHeight - limit;
		dd_border_top      = dd_contentsTop + limit;
		dd_contents2_top   = dd_contentsTop + limit + dd_borderHeight;
	} else if (parseInt(mouseY - dragObj.offsetY) > maxHeight + dd_contentsTop - limit){
		dd_contentsHeight  = maxHeight + dd_contentsTop - limit;
		dd_contents2Height = maxHeight - dd_contentsHeight;
		dd_border_top      = maxHeight - dd_contentsTop - limit;
		dd_contents2_top   = dd_contentsHeight + dd_borderHeight;
	} else {
		dd_contentsHeight  = mouseY - dragObj.offsetY - dd_contentsTop;
		dd_contents2Height = maxHeight - dd_contentsHeight;
		dd_border_top      = mouseY - dragObj.offsetY;
		dd_contents2_top   = mouseY - dragObj.offsetY + dd_borderHeight;
	}
	document.getElementById('dd_border').style.top = dd_border_top + 'px';
	document.getElementById('dd_contents2').style.top = dd_contents2_top + 'px';
	document.getElementById('dd_contents').style.height = dd_contentsHeight + 'px';
	document.getElementById('dd_contents2').style.height = dd_contents2Height + 'px';
	return false;
}
</script>
<style type="text/css">
div.dd_box{
	position:absolute;
	width:400px;
	overflow: auto;
}
#dd_contents {
	background-color:#ddd;
	z-index: 1;
}
#dd_border {
	background-color:#ffe;
	z-index: 10;
	overflow: hidden;
}
#dd_contents2 {
	background-color:#eff;
	z-index: 1;
}
</style>
<div style="position:relative;height:220px;">
<div class="dd_box" id="dd_contents"><br><br>ボックスその1</div>
<div class="dd_box" id="dd_border">ここをドラッグできます。</div>
<div class="dd_box" id="dd_contents2"><br><br>ボックスその3</div>
</div>