自定义布局（转）
// 控件之间的间距
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
浙公网安备 33010602011771号