自定义布局（转）

其他 2018-09-12 08:12:42 阅读次数: 0 
// 控件之间的间距
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

猜你喜欢

转载自www.cnblogs.com/ihzeng/p/9632110.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022