自定義佈局（轉）

// 控件之間的間距
var space = 33;

//裝載顯示在左邊的DIV
var leftObjs = [];
// 裝載顯示在中間的DIV，目前沒用到，擴展成三列時用到
var centerObjs = [];
//裝載顯示在右邊的DIV
var rightObjs = [];

var layout="maxMin";		// 默認爲中間對中間版式,目前可選值爲："centerCenter" , "maxMin" , "minMax"
var isLayout = false;		// 表示當前用戶是否正在佈局，默認爲沒有
var isMouseDown = false;	// 表示鼠標是否被按下，默認爲沒有,用於拖動版塊時

// 記錄版塊拖動時的前一個位置的座標
var divLeft = 0;
var divTop = 0;
// 記錄正在拖動的div
var activeDiv = null;
// 記錄版塊拖動時鼠標的前一個位置的座標
var oldX =0;
var oldY = 0;


// 獲得距離左邊的距離
function getOffsetLeft(e)
{
	var offLeft = 0;	
	while(e)
	{
		offLeft += e.offsetLeft;		
		e = e.offsetParent;
	}	
	return offLeft;
}

// 獲得距離頂端的距離
function getOffsetTop(e)
{
	var offTop = 0;
	while(e)
	{
		offTop += e.offsetTop;
		e = e.offsetParent;
	}
	return offTop;
}


// 給裝載對象佈局
function layoutObjs()
{
	// 獲得初始佈局高度
	var initTop = getOffsetTop($("#pageHeader").get(0)) + $("#pageHeader").get(0).offsetHeight;
	var itTop = initTop;
	var i;
	
	for(i = 0 ; i < leftObjs.length ; i++)
	{
		$(leftObjs[i]).removeAttr("class");
		$(leftObjs[i]).addClass("share");
		$(leftObjs[i]).css({top:itTop});
		itTop += leftObjs[i].offsetHeight + 10;

		// 根據參數動態加載佈局樣式
		if(layout=="centerCenter")
		{
			$(leftObjs[i]).addClass("centerLeft");
		}
		else if(layout == "maxMin")
		{
			$(leftObjs[i]).addClass("maxLeft");
		}
		else if(layout == "minMax")
		{
			$(leftObjs[i]).addClass("minLeft");
		}
	}
		

	itTop = initTop;
	for(i = 0 ; i < rightObjs.length; i++)
	{
		$(rightObjs[i]).removeAttr("class");
		$(rightObjs[i]).addClass("share");
		$(rightObjs[i]).css({top:itTop});
		itTop += rightObjs[i].offsetHeight + 10;

		if(layout=="centerCenter")
		{
			$(rightObjs[i]).addClass("centerRight");
		}
		else if(layout == "maxMin")
		{
			$(rightObjs[i]).addClass("minRight");
		}
		else if(layout == "minMax")
		{
			$(rightObjs[i]).addClass("maxRight");
		}
	}
	
}


// 初始化裝載對象
function initObjs()
{
	
	leftObjs.push($("#userInfo").get(0));
	leftObjs.push($("#content").get(0));
	rightObjs.push($("#time").get(0));
	rightObjs.push($("#weather").get(0));	

	/*
	leftObjs[0] = $("#userInfo").get(0);
	leftObjs[1] = $("#content").get(0);
	rightObjs[0] = $("#time").get(0);
	rightObjs[1] = $("#weather").get(0);
	*/

	layoutObjs();
}



var dragFn = function drag()
{
	if(isLayout)
	{
		oldX = event.clientX + document.body.scrollLeft;
		oldY = event.clientY + document.body.scrollTop;		
		divLeft = getOffsetLeft(this);
		divTop = getOffsetTop(this);			
		
		// 記錄實際須要拖動佈局的控件DIV
		activeDiv = this;
		
		// 構造一個臨時的懸浮DIV，至關於複製一個實際被拖動的對象
		$("#tempDiv").html($(this).html());
		$("#tempDiv").css({visibility:"visible",left:divLeft,top:divTop,width:this.offsetWidth,height:this.offsetHeight});
		$("#tempDiv").fadeTo("fast" , 0.4 , function(){});

		isMouseDown = true;
		$("#tempDiv").mousemove(moveFn);	
	}
};

// 移動其餘元素填補隱藏控件的位置
function moveUp()
{
	// 標識是否匹配到拖動元素
	var flag = false;
	var index = -1;

	// 須要遍歷全部對象數組

	for(var i = 0 ; i < leftObjs.length; i++)
	{
		if(leftObjs[i] == activeDiv)
		{
			index = i;
			flag = true;
		}
		else
		{
			if(flag)
			{
				// 往前挪動
				leftObjs[i-1] = leftObjs[i];
			}
		}
	}

	if(index >= 0)
	{
		// 彈出最後一個對象
		leftObjs.pop();

		// 在界面上移動其餘元素
		for(var i = index ; i < leftObjs.length; i++)
		{
			divTop = getOffsetTop(leftObjs[i]);
			divTop -= ($("#tempDiv").get(0).offsetHeight + 20 + document.body.scrollTop);
			$(leftObjs[i]).css({top:divTop});
		}
		return ;
	}

/*	擴展成三列時用到
	for(var i = 0 ; i< centerObjs.length; i++)
	{}
*/	

	index = -1;
	for(var i = 0 ; i< rightObjs.length; i++)
	{
		if(rightObjs[i] == activeDiv)
		{
			index = i;
			flag = true;
		}
		else
		{
			if(flag)
			{
				// 往前挪動
				rightObjs[i-1] = rightObjs[i];
			}
		}
	}

	if(index >= 0)
	{
		// 彈出最後一個對象
		rightObjs.pop();

		// 在界面上移動其餘元素
		for(var i = index ; i < rightObjs.length; i++)
		{
			divTop = getOffsetTop(rightObjs[i]);
			divTop -= ($("#tempDiv").get(0).offsetHeight + 20 + document.body.scrollTop);
			$(rightObjs[i]).css({top:divTop});
		}
		return ;
	}
}

// 找到拖動元素的新位置，找到時須要先去掉該元素的舊位置
function findNewPosition()
{
	// 記錄拖動元素在對象數組中的下標
	var index = -1;
	if(    (layout=="centerCenter" && oldX < 500 ) 
		|| (layout=="maxMin" && oldX < 666 )
		|| (layout=="minMax" && oldX <= 334 ))
	{
		// 記錄數組長度
		var arrayLen = leftObjs.length;
		
		// 左邊數組沒有元素時，即界面上左邊爲空的狀況
		if(arrayLen <= 0)
		{
			moveUp();
			leftObjs[0] = activeDiv;

			divTop = getOffsetTop($("#pageHeader").get(0)) + $("#pageHeader").get(0).offsetHeight;
		}
		// 判斷是否加在最末尾
		else if(oldY >= (getOffsetTop(leftObjs[arrayLen-1]) + leftObjs[arrayLen-1].offsetHeight))
		{
			index = arrayLen;
			moveUp();// 調用該函數可能改變當前數組的長度，故須要進行判斷
			if(arrayLen > leftObjs.length)
				index--;				

			leftObjs[index] = activeDiv;
			
			// 得到拖動元素新位置的top值
			divTop = getOffsetTop(leftObjs[index-1]) + leftObjs[index-1].offsetHeight + 10;
		}
		else
		{
			// 再判斷其餘元素
			for(var i = arrayLen-1  ; i >=0 ; i--)
			{
				var temp = getOffsetTop(leftObjs[i]) - 10;
				if(oldY > temp)
				{
					leftObjs[i+1] = leftObjs[i];
					index = i;
					moveUp();// 調用該函數可能改變當前數組的長度，故須要進行判斷
					if(arrayLen > leftObjs.length)
						index--;					

					leftObjs[index] = activeDiv;

					// 得到拖動元素新位置的top值
					if(index == 0)	// 若是是加在最前面
						divTop = getOffsetTop($("#pageHeader").get(0)) + $("#pageHeader").get(0).offsetHeight;
					else
						divTop = getOffsetTop(leftObjs[index-1]) + leftObjs[index-1].offsetHeight + 10;

					break;
				}
				else
				{
					leftObjs[i+1] = leftObjs[i];
				}
			}
		}	
		if(layout == "centerCenter")
			$(activeDiv).addClass("centerLeft");
		else if(layout == "maxMin")
			$(activeDiv).addClass("maxLeft");
		else if(layout == "minMax")
			$(activeDiv).addClass("minLeft");
	}
	else
	{
		// 記錄數組長度
		var arrayLen = rightObjs.length;

		// 右邊數組沒有元素時，即界面上右邊爲空的狀況
		if(arrayLen <= 0)
		{
			moveUp();
			rightObjs[0] = activeDiv;

			divTop = getOffsetTop($("#pageHeader").get(0)) + $("#pageHeader").get(0).offsetHeight;
		}
		// 判斷是否加在最末尾
		else if(oldY >= (getOffsetTop(rightObjs[arrayLen-1]) + rightObjs[arrayLen-1].offsetHeight))
		{
			index = arrayLen;

			moveUp();// 調用該函數可能改變當前數組的長度，故須要進行判斷
			if(arrayLen > rightObjs.length)
				index--;				

			rightObjs[index] = activeDiv;
			
			// 得到拖動元素新位置的top值			
			divTop = getOffsetTop(rightObjs[index-1]) + rightObjs[index-1].offsetHeight + 10;
		}
		else
		{
			// 再判斷其餘元素
			for(var i = arrayLen-1  ; i >=0 ; i--)
			{
				var temp = getOffsetTop(rightObjs[i]) - 10;
				if(oldY > temp)
				{
					rightObjs[i+1] = rightObjs[i];
					index = i;
					moveUp();// 調用該函數可能改變當前數組的長度，故須要進行判斷
					if(arrayLen > rightObjs.length)
						index--;					

					rightObjs[index] = activeDiv;

					// 得到拖動元素新位置的top值
					if(index == 0)	// 若是是加在最前面
						divTop = getOffsetTop($("#pageHeader").get(0)) + $("#pageHeader").get(0).offsetHeight;
					else
						divTop = getOffsetTop(rightObjs[index-1]) + rightObjs[index-1].offsetHeight + 10;

					break;
				}
				else
				{
					rightObjs[i+1] = rightObjs[i];
				}
			}
		}
		if(layout == "centerCenter")
			$(activeDiv).addClass("centerRight");
		else if(layout == "maxMin")
			$(activeDiv).addClass("minRight");
		else if(layout == "minMax")
			$(activeDiv).addClass("maxRight");
	}

	// 從新設置拖動元素位置
	$(activeDiv).css({top:divTop});
	$(activeDiv).removeAttr("class");
	$(activeDiv).addClass("share");
	layoutObjs();
}

var dropFn = function drop()
{	
	if(isLayout)
	{		
		isMouseDown = false;
		// 記錄鼠標放下時的座標
		oldX = event.clientX + document.body.scrollLeft;
		oldY = event.clientY + document.body.scrollTop;		

		// 只是隱藏了臨時控件，但它目前仍然記錄着實際控件的各類信息，將用到
		$("#tempDiv").css("visibility" , "hidden");

		// 經過鼠標位置判斷拖動控件新位置
		findNewPosition();
	}
};

var moveFn = function move()
{
	if(isMouseDown)
	{
		var newX = event.clientX + document.body.scrollLeft;
		var newY = event.clientY + document.body.scrollTop;
		// 設置被拖動版塊的新位置
		divLeft += (newX - oldX);
		divTop += (newY - oldY);
		oldX = newX;
		oldY = newY;
		$("#tempDiv").css({left:divLeft,top:divTop});
	}
};

// 初始化頁頭以及一些觸發事件
function initLayout()
{
	// 設置版式觸發事件
	$("#close").click(function(){
		$("#layout").hide("slow");
	});

	$("#layoutTool").click(function(){
		$("#layout").css("visibility","visible");
		$("#layout").show("slow");
	});

	$("#centerCenter").click(function(){
		layout = "centerCenter";
		layoutObjs();
	});

	$("#maxMin").click(function(){
		layout = "maxMin";
		layoutObjs();
	});

	$("#minMax").click(function(){
		layout = "minMax";
		layoutObjs();
	});

	$("#beginLayout").click(function(){
		$("#beginLayout").css("display" , "none");
		$("#stopLayout").css("display" , "inline");
		isLayout = true;
		// 設置能夠拖動控件時顯示的光標
		$(".share").addClass("dragCursor");
	});

	$("#stopLayout").css("display" , "none");

	$("#stopLayout").click(function(){
		$("#stopLayout").css("display" , "none");
		$("#beginLayout").css("display" , "inline");
		isLayout = false;
		// 不可拖動控件時去掉移動光標
		$(".share").removeClass("dragCursor");
	});
}

// 頁面下載完後執行的函數
var readyFn = function ready()
{
	// 初始佈局
	initLayout()

	// 初始佈局控件
	initObjs();

	// 設置版塊拖動時所響應的函數
	/*
	$("#content").mousedown(dragFn);
	$("#userInfo").mousedown(dragFn);
	$("#time").mousedown(dragFn);
	$("#weather").mousedown(dragFn);
	*/
	$(".share").mousedown(dragFn);

	$("#tempDiv").mouseup(dropFn);

}

$(readyFn);

layout.css:

body
{
	position:absolute;
}

#tempDiv
{
	position:absolute;
	z-index:100;
	/* visibility:hidden; */
}

.divHeader
{
	font-size:large;
	font-weight:bold;
	text-align:left;
}

.toolClass
{
	display:inline;
	color:red;
	margin-left:5px;
	margin-right:5px;
}

#layout
{
	z-index:10;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100px;
	text-align:center;
	background:yellow;
	visibility:hidden;
}

#centerCenter,#maxMin,#minMax
{
	width:200px;
	display:inline;
	margin-top:20px;
}

#close
{
	float:right;
	margin-right:15px;
	color:red;
}

#pageHeader
{
	background:yellow;
	height:1.5em;
	padding-top:5px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	text-align:left;
	padding-left:20px;
}


.share
{
	padding:5px;
	background:gray;
	position:absolute;
}

.dragCursor
{
	cursor:move;
}

.minRight
{
	width:300px;
	right:33px;
}

.maxLeft
{
	width:600px;
	left:33px;
}

.minLeft
{
	width:300px;
	left:33px;
}

.maxRight
{
	width:600px;
	right:33px;
}

.centerLeft
{
	width:450px;
	left:33px;
}

.centerRight
{
	width:450px;
	right:33px;
}

#time,#userInfo,#weather
{
	height:150px;
}

#content
{
	height:350px;
}

　　html

　　

<html>

<head><title></title>

<link rel="stylesheet" href="layout.css" />
<script language="javascript" type="text/javascript" src="../jquery-1[1].2.6.js"></script>
<script language="javascript" type="text/javascript" src="layout.js"></script>

</head>

<body>
<!-- 臨時的懸浮DIV -->
<div id="tempDiv" class="share"></div>

<!-- 顯示佈局版式 -->
<div id="layout">
	<div id="centerCenter">
		中間/中間
	</div>
	
	<div id="maxMin">
		大/小
	</div>

	<div id="minMax">
		小/大
	</div>

	<div id="close">
		關閉
	</div>
</div>


<!-- 定義可供用戶佈局的控件 -->
<!-- 顯示時間的控件 -->
<div id="time" class="share" dragDiv="true">
	<div class="divHeader">時間</div>
	<div>
	the time is 2008-07-27
	</div>
</div>

<!-- 顯示用戶我的信息的控件 -->
<div id="userInfo" class="share" dragDiv="true">
	<div class="divHeader">我的信息</div>
	<div>
	hello:sunhao
	</div>
</div>

<!-- 顯示天氣的控件 -->
<div id="weather" class="share" dragDiv="true">
	<div class="divHeader">天氣</div>
	<div>
	今 22℃～32℃ 明 22℃～30℃ 
	</div>
</div>

<!-- 顯示正文的控件 -->
<div id="content" class="share" dragDiv="true">
	<div class="divHeader">正文</div>
	<div>
	<pre>
	漢皇重色思傾國,御宇多年求不得.
	楊家有女初長成,養在深閨人未識.
	天生麗質難自棄,一朝選在君王側.
	回眸一笑百媚生,六宮粉黛無顏色.
	春寒賜浴華清池,溫泉水滑洗凝脂.
	侍兒扶起嬌無力,始是新承恩澤時.
	雲鬢花顏金步搖,芙蓉賬暖度春宵.
	春宵苦短日高起,今後君王不早朝.
	承歡侍宴無閒暇,春從春遊夜專夜.
	後宮佳麗三千人,三千寵愛在一身.
	</pre>
	</div>
</div>


<div id="pageHeader">
	工具條：
	<div id="layoutTool" class="toolClass">打開版式</div>
	<div id="beginLayout" class="toolClass">開始佈局</div>
	<div id="stopLayout" class="toolClass">中止佈局</div>
</div>

</body>

</html>

　　

轉自：www.iteye.com/topic/222353