自定义布局（转）

时间  2019-12-12
标签 自定义 布局 繁體版
原文   原文链接 
// 控件之间的间距
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:javascript

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;
}

　　htmlcss

　　

<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/222353html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程