div拖动布局
<!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=utf-8" /> <title>拖动</title> <mce: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:250px;margin:0 8px;height:auto;} #main_right{float:left;width:250px;height:auto;} #main_right1{float:left;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;} --></mce:style><style type="text/css" mce_bogus="1">*{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:250px;margin:0 8px;height:auto;} #main_right{float:left;width:250px;height:auto;} #main_right1{float:left;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> <mce: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); } } }//去除容器中的空白 // --></mce:script> </head> <body onload="_dragFix.init('pm_main');"> <!--头部开始--> <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="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">X</a> </div> <div class="system_header_content"> <div class="one"><span style="color:red" mce_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="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">X</a> </div> <div class="system_header_content"> <div class="one"> <span style="color:red" mce_style="color:red">可以任意拖动</span> </div> </div> </div> </div> <div id="main_main"> <div> fsdfjsdlfkja;skflsj; </div> <div id="drag3" drag="yes" range="out"> <div class='system_header_bar' header='yes'> <span>标题</span> <a href="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">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="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">X</a> </div> <div class="system_header_content"> <div class="one"> <span>支持绝大多数浏览器！暂时没发现有不支持的浏览器，发现有的，请给我发个信息！<br> QQ：447959415<br> MSN:[email protected]<br> Blog:<a target="_blank" href="http://freebirdy.blog.sohu.com" mce_href="http://freebirdy.blog.sohu.com" rel="external">http://freebirdy.blog.sohu.com</a><br> Email:[email protected] <a href="[email protected]:[email protected]" mce_href="http://mce_host/[email protected]@163.com">[email protected]</a></span> </div> </div> </div> <!-- <div id="drag5" drag="no" range="out"> <div class='system_header_bar' header='yes'> <span>不能拖动</span> <a href="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">X</a> </div> <div class="system_header_content"> <div class="one"> <span style="color:red" mce_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="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">X</a> </div> <div class="system_header_content"> <span style="color:red" mce_style="color:red">只能在此列拖动</span> </div> </div> <div id="drag7" drag="yes" range="out"> <div class='system_header_bar' header='yes'> <span>搜索</span> <a href="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">X</a> </div> <div class="system_header_content"> <div class="one"> <span style="color:red" mce_style="color:red">可以任意拖动</span> </div> </div> </div> </div> <div id="main_right1"> <div id="drag11" drag="yes" range="in"> <div class='system_header_bar' header='yes'> <span>系统参数</span> <a href="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">X</a> </div> <div class="system_header_content"> <span style="color:red" mce_style="color:red">只能在此列拖动</span> </div> </div> <div id="drag12" drag="yes" range="out"> <div class='system_header_bar' header='yes'> <span>搜索</span> <a href="#" mce_href="#" class="button_del" title="关闭" onclick="this.parentNode.parentNode.style.display='none'">X</a> </div> <div class="system_header_content"> <div class="one"> <span style="color:red" mce_style="color:red">可以任意拖动</span> </div> </div> </div> </div> </div> <!--主体部分结束--> </body> </html>