JavaScript 拖动布局dragFix - 王朝网络宽屏版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

*{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>

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>

<span>只能在此列拖动</span>

</div>

<div class="one"><span style='color:red'>只能在此列拖动</span></div>

</div>

<span>可以任意拖动</span>

</div>

<span style='color:red'>可以任意拖动</span>

</div>

</div>

</div>

<span>freebirdy</span>

</div>

<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.com