开发学院网页设计 JavaScript JavaScript 拖动布局dragFix 阅读

JavaScript 拖动布局dragFix

　2009-08-05 20:13:26　来源：WEB开发网　　　

核心提示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http

<!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 = "这个层可以任意拖动";
　　
　　 _dragFix.Temp = _dragFix.Obj.cloneNode(false); //临时插入块
　　 _dragFix.Obj.parentNode.insertBefore(_dragFix.Temp,_dragFix.Obj);
　　 _dragFix.Temp.id = _dragFix.Tempid;
with(_dragFix.Obj.style)
{
　　 position = "absolute";
　　 zIndex = 1000;
}

with(_dragFix.Temp.style)
{
　　 width = "auto";
　　 height = _dragFix.Obj.offsetHeight - 12 + "px";
　　 border = "2px dotted red";
　　 margin = "0 0 8px 0";
}
},
drag:function(e)
{
　　 if(!_dragFix.Ctrl || !_dragFix.Sign || _dragFix.Obj==null) return;
if(!e) e = window.event;
var currenX = getMouseX(e); //鼠标当前X坐标
var currenY = getMouseY(e); //鼠标当前Y坐标
//var currenObjX = currenX;
//var currenObjY = currenY;
var currenObjX = getRealLeft(_dragFix.Obj);
var currenObjY = getRealTop(_dragFix.Obj);
//window.status = currenObjX + "-" +currenObjY;
if(_dragFix.Range != "in")
{
　　 _dragFix.Obj.style.left = (_dragFix.Obj.initoffsetL + currenX - _dragFix.Obj.initMouseX) + "px";
　　 for(var i = 1; i < _dragFix.PositionsX.length; i++)
　　 {
　　 if(currenObjX > _dragFix.PositionsX[i]) _dragFix.Row = _dragFix.Rows[i];
　　 else
　　 {
　　 _dragFix.Row = _dragFix.Rows[i-1];
　　 break;
　　 }
　　 }
} //如果拖动层设置为只在当前列拖，则保持横坐标(X坐标)不变
else _dragFix.Row = _dragFix.Obj.parentNode.id;
　 //_dragFix.Obj.style.width = $(_dragFix.Row).offsetWidth;
　 //_dragFix.Temp.style.height = _dragFix.Obj.offsetHeight;
//window.status = "所在列："+_dragFix.Row;
_dragFix.Obj.style.top = (_dragFix.Obj.initoffsetY + currenY - _dragFix.Obj.initMouseY) + "px";

var finded = false;

　 var dragC = $(_dragFix.Row).childNodes;
for(var i = 0; i < dragC.length; i++)
{
　　 var o = dragC[i];
　　 var sonT = getRealTop(o);
　　 var sonH = o.offsetHeight;
　　 var tH = sonT + parseInt(sonH/2);
　　 var tH2 = sonT + sonH;
　　 if(o.getAttribute("drag"))
　　 {
　　　 if(currenObjY > sonT && currenObjY < tH)
　　　 {
　　　　 $(_dragFix.Row).insertBefore(_dragFix.Temp,o);
　　　　 break;
　　　 }
　　　 else if(currenObjY > tH && currenObjY < tH2 + 8)
　　　 {
　　　　 if(o.nextSibling) $(_dragFix.Row).insertBefore(_dragFix.Temp,o.nextSibling);
　　　　 else $(_dragFix.Row).appendChild(_dragFix.Temp);
　　　　 break;
　　　 }
　　　 // else if()
　　 }
}
　 // if(!finded) $(_dragFix.Row).appendChild(_dragFix.Temp);
return;
},
end:function()
{
if(!_dragFix.Ctrl || !_dragFix.Sign) return;
_dragFix.Sign = false;
_dragFix.timer = _dragFix.repos(150,15);//放开时回到新的位置
window.status = "拖动结束";
},
repos:function(aa,ab)
{
var tl=getRealLeft(_dragFix.Obj);
　 var tt=getRealTop(_dragFix.Obj);
　 var kl=(tl-getRealLeft(_dragFix.Temp))/ab;
　 var kt=(tt-getRealTop(_dragFix.Temp))/ab;
　 return setInterval(function(){
　　　 if(ab<1)
　 {
　　 clearInterval(_dragFix.timer);
　　 _dragFix.Temp.parentNode.insertBefore(_dragFix.Obj,_dragFix.Temp);
　　 _dragFix.Obj.parentNode.removeChild(_dragFix.Temp);
　　 with(_dragFix.Obj.style)
　　 {
　　　 position = "";
　　　 zIndex = "";
　　　 width = "100%";
　　 }
　　 return;
　　　 }
　　　 ab--;
　　　 tl-=kl;
　　　 tt-=kt;
　　　 _dragFix.Obj.style.left=parseInt(tl)+"px";
　　　 _dragFix.Obj.style.top=parseInt(tt)+"px";
　 },aa/ab);
},
stop:function()
{
　 if(!_dragFix.Root)
　 {
　 windowCDtatus = "拖动未开启";
　 return;
　 }
　 var dragC = _dragFix.Root.getElementsByTagName("DIV");
　 for(var i = 0; i < dragC.length; i++)
　 {
　　 if(dragC[i].getAttribute("drag") == "yes")
　 {
　　　 var o = dragC[i].firstChild;
　　　 dragC[i].firstChild.style.cursor = "";
　　 }
　 }//获取所有可拖动的对象
　 _dragFix.Ctrl = false;
　 window.status = "拖动已关闭";
}
}
function $(id) {return document.getElementById(id);}
function getT(e){return e.target || e.srcElement;}
function getMouseX(e){
return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - document.body.clientLeft;
}
function getMouseY(e){
return e.pageY ? e.pageY : e.clientY + document.body.scrollTop - document.body.clientTop;
}
function getRealLeft(o){
var l = 0;
while(o){
l += o.offsetLeft - o.scrollLeft;
o = o.offsetParent;
}
return(l);
}
function getRealTop(o){
var t = 0;
while(o){
t += o.offsetTop - o.scrollTop;
o = o.offsetParent;
}
return(t);
}
function cleanWhitespace(node) {
　　 var notWhitespace = /\S/;
　　 for (var i=0; i < node.childNodes.length; i++) {
　　　　 var childNode = node.childNodes[i];
　　　　 if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
　　　　　　 node.removeChild(node.childNodes[i]);
　　　　　　 i--;
　　　　 }
　　　　 if (childNode.nodeType == 1) {
　　　　　　 cleanWhitespace(childNode);
　　　　 }
　　 }
}//去除容器中的空白
</script>
</head>
<body >

<div id="pm_header"> </div>


<div id="pm_main">
<div id="main_left">
<div id="drag1" drag="yes" range="in">
<div class='system_header_bar' header='yes'>
　 <span>只能在此列拖动</span>
　 <a href="#" class="button_del" title="关闭" >X</a>
　
</div>
<div class="system_header_content">
　
　 <div class="one"><span style='color:red'>只能在此列拖动</span></div>
</div>
</div>
<div id="drag2" drag="yes" range="out">
<div class='system_header_bar' header='yes'>
　　 <span>可以任意拖动</span>
　 <a href="#" class="button_del" title="关闭" >X</a>
</div>
<div class="system_header_content">
　 <div class="one">
　 <span style='color:red'>可以任意拖动</span>
　 </div>
　　　　　　　 </div>
</div>
</div>
<div id="main_main">
<div id="drag3" drag="yes" range="out">
<div class='system_header_bar' header='yes'>
　 <span>标题</span>
　 <a href="#" class="button_del" title="关闭" >X</a>
　
</div>
<div class="system_header_content">
　 <div class="one">内容</div>
　　　　　　　 </div>
</div>

<div id="drag4" drag="yes" range="in">
<div class='system_header_bar' header='yes'>
　 <span>freebirdy</span>
　 <a href="#" class="button_del" title="关闭" >X</a>
　
</div>
<div class="system_header_content">
　 <div class="one">
　 <span>支持绝大多数浏览器！暂时没发现有不支持的浏览器，发现有的，请给我发个信息！<br>
QQ：447959415<br>
MSN:freebirdy0815@hotmail.com<br>
Blog:<a target="_blank" href="http://freebirdy.blog.sohu.com" rel="external">http://freebirdy.blog.sohu.com</a><br>
Email:freebird110@qq.com <a href="freebirdy0815@163.commailto:freebirdy0815@163.com">freebirdy0815@163.com</a></span>
　 </div>
　　　　　　　 </div>
　　　 </div>
<div id="drag5" drag="no" range="out">
<div class='system_header_bar' header='yes'>
　
　 <span>不能拖动</span>
　 <a href="#" class="button_del" title="关闭" >X</a>
　
</div>
<div class="system_header_content">
　 <div class="one">
　 <span style="color:red">不能拖动</span>
　 </div>
　　　　　　　 </div>
</div>

</div>
<div id="main_right">
<div id="drag6" drag="yes" range="in">
<div class='system_header_bar' header='yes'>
　
　 <span>系统参数</span>
　 <a href="#" class="button_del" title="关闭" >X</a>
　
</div>
<div class="system_header_content">
　 <span style='color:red'>只能在此列拖动</span>
　　　　　　　 </div>
</div>

<div id="drag7" drag="yes" range="out">
<div class='system_header_bar' header='yes'>
　　　　　　　　　　　　　　　 <span>搜索</span>
　 <a href="#" class="button_del" title="关闭" >X</a>
　　　　　　　　　　　
　　　　　　　 </div>
<div class="system_header_content">
　 <div class="one">
　 <span style='color:red'>可以任意拖动</span>
　 </div>
　　　　　　　 </div>
</div>
</div>
</div>

</body>
</html>