JavaScript 拖动布局dragFix
电脑知识
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>拖动</title>
<style type="text/css">
*{font-size:14px;color:#666;padding:0;margin:0;}
a{text-decoration: none;color:#666;}
a:hover{text-decoration: underline;}
#pm_header{width:968px;margin:0 auto 8px auto;background:#4B5976;height:40px;}
#pm_main{width:968px;margin:auto;margin-bottom:10px;height:auto;}
#pm_foot{width:968px;height:15px;margin:10px auto;padding:5px 0;text-align:center;}
#main_left{float:left;width:180px;height:auto;}
#main_main{float:left;width:520px;margin:0 8px;height:auto;}
#main_right{float:right;width:250px;height:auto;}
.system_header_bar{width:auto;height:18px;border:1px solid #999;padding:5px;background:#E1EDF8;line-height:20px;}
.system_header_bar span{float:left;margin-right:4px;}
.system_header_bar a{float:right;margin-right:4px;}
.system_header_content{width:auto;height:auto;border:1px solid #999;border-top:0;margin-bottom:8px;padding:5px;}
/**
*按钮样式
*/
a.button_del{width:18px;height:18px;}
</style>
<script type="text/javascript">
var _dragFix =
{
Ctrl : false, //拖动控制开关
Root : null, //拖动容器
Obj : null, //拖动对象
Temp : null, //临时插入块
Tempid :"drayTemp",
Sign : false, //拖动标志
Range :null, //拖动对象活动范围 in表示只能在当前列拖动，out表示可以任意拖动
Change:false, //布局是否有改动
Parent:null, //拖动对象所在列的ID
Header:"yes",
Shape:null, //阴影层
Rows : [], //所有拖动列ID
PositionsX: [],
Row :null, //当前所在列
init:function(id)
{
_dragFix.Root = document.getElementById(id);
cleanWhitespace(_dragFix.Root);//清除空白节点
var dragRows = _dragFix.Root.childNodes;
for(var i=0;i<dragRows.length;i++)
{
if(dragRows[i].id)
{
_dragFix.Rows[i] = dragRows[i].id;
_dragFix.PositionsX[i] = getRealLeft(dragRows[i])-8;
}
}
if(!_dragFix.Rows.length) return; //如果容器中不含拖动列，结束
var dragC = _dragFix.Root.getElementsByTagName("DIV");
//alert(dragC.length);return;
for(var i = 0; i < dragC.length; i++)
{
if(dragC[i].getAttribute("drag") == "yes")
{
var o = dragC[i].firstChild;
o.onmousedown = _dragFix.start;
dragC[i].firstChild.style.cursor = "move";
dragC[i].style.position = "";
}
}//获取所有可拖动的对象
document.onmousemove = _dragFix.drag;
document.onmouseup = _dragFix.end;
_dragFix.Ctrl = true;
window.status = "拖动已开启";
},
start:function(e)
{
if(!_dragFix.Ctrl || $(_dragFix.Tempid)) return;
if(!e) e = window.event;
var obj = getT(e);
if("A" == obj.tagName) return;
if(obj.getAttribute("header") != _dragFix.Header) obj = obj.parentNode; //拖动头
_dragFix.Sign = true; //拖动准备就绪
_dragFix.Obj = obj.parentNode; //要拖动的对象
_dragFix.Range = _dragFix.Obj.getAttribute("range");
_dragFix.Obj.initMouseX = getMouseX(e);
_dragFix.Obj.initMouseY = getMouseY(e);
_dragFix.Obj.initoffsetL = getRealLeft(_dragFix.Obj);
_dragFix.Obj.initoffsetY = getRealTop(_dragFix.Obj);
_dragFix.Obj.style.width = _dragFix.Obj.offsetWidth+"px";
if("in" == _dragFix.Range) window.status = "这个层只能在当前列拖动";
else window.status = "这个层可以任意拖动";