用javascript做拖动布局的思路

好了，转入正文，在开始之前先介绍几个功能函数！
1.格式化事件的函数
复制代码 代码如下:
functiongetEvent(){
//同时兼容ie和ff的写法
if(document.all)returnwindow.event;
func=getEvent.caller;
while(func!=null){
vararg0=func.arguments[0];
if(arg0){
(typeof(arg0)==object&&arg0.preventDefault&&arg0.stopPropagation)){
returnarg0;
}
}
func=func.caller;
}
returnnull;
}


2.取得鼠标的位置

复制代码 代码如下:

functionmouseCoords(ev){
if(ev.pageXev.pageY){
return{x:ev.pageX,y:ev.pageY};
}
return{
x:ev.clientX+document.body.scrollLeft-document.body.clientLeft,
y:ev.clientY+document.body.scrollTop-document.body.clientTop
};
}


3.得到元素的位置

复制代码 代码如下:
functiongetPosition(ele){
varleft=0;
vartop=0;
while(ele.offsetParent){
left+=ele.offsetLeft;
top+=ele.offsetTop;
ele=ele.offsetParent;
}
left+=ele.offsetLeft;
top+=ele.offsetTop;
return{x:left,y:top};
}

首先，当然是写好初始布局的页面，查看初始页面效果

一般拖动的元素是跟随鼠标的，我的思路是在把拖动的元素增加到一个position为absolute的div中，
鼠标拖动的时候就让它的位置根据鼠标的坐标变化就可以了。所以在页面增加了个onload

复制代码 代码如下:
vartmpDiv=null;//临时存放拖动对象的div
window.onload=function(){
tmpDiv=document.createElement(div);
tmpDiv.style.cssText=position:absolute;display:none;border:1pxdotted#FFCC66;;
document.body.appendChild(tmpDiv);
}


要实现拖动，首先触发的事件是mouseDown,所以我在拖动的table的一个td上绑定了onmousedown=mouseDown(this);

程序代码

复制代码 代码如下:
vardragObject=null;//拖动的元素(table)
varmouseOffset=null;//鼠标的在拖动元素中的位置
vardragDiv=null;//拖动的table所在的列的div
vareleDivW=null;//拖动的table的父节点(div)的高度
vardragDivLen=null;//拖动的table所在的列的div中用来放置table的div的个数
varDragContainer=[col1,col2,col3];//用来实现列布局的div的id
//鼠标按下拖动的元素
functionmouseDown(elem){
ev=getEvent();
dragObject=elem.parentNode.parentNode.parentNode;//被拖动的table
dragDiv=dragObject.parentNode.parentNode;
//拖动元素所在列里div的个数
dragDivLen=dragDiv.getElementsByTagName(div).length;
mouseOffset=getMouseOffset(dragObject,ev);
eleDivW=dragObject.parentNode.offsetWidth;
dragObject.parentNode.style.border=1pxdotted#FFCC66;
returnfalse;
}
//得到鼠标在拖动元素中的位置
functiongetMouseOffset(target,ev){
vardocPos=getPosition(target);
varmousePos=mouseCoords(ev);
return{x:mousePos.x-docPos.x,y:mousePos.y-docPos.y};
}


剩下的当然就是鼠标移动拖动对象也能移动，用到的当然就是mouseMove咯，为简单我在document上绑定，

复制代码 代码如下:
document.onmousemove=mouseMove;
functionmouseMove(){
ev=getEvent();
varmousePos=mouseCoords(ev);
if(dragObject){
dragObject.parentNode.style.display=none;//设置放置被拖动table的div隐藏
//把拖动的table放到临时的div中，并设置其坐标
for(vari=0;i<tmpDiv.childNodes.length;i++)tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.appendChild(dragObject.cloneNode(true));
tmpDiv.style.width=eleDivW+px;
tmpDiv.style.backgroundColor=#FFFFFF;
tmpDiv.style.display=block;
tmpDiv.style.left=(mousePos.x-mouseOffset.x)+px;
}
returnfalse;
}



有了mousemove当然少不了mouseup
复制代码 代码如下:
document.onmouseup=mouseUp;
//鼠标松开
functionmouseUp(){
if(dragObject){
if(dragObject.parentNode.style.display==none)dragObject.parentNode.style.display=block;
dragObject.parentNode.style.border=1pxsolid#FFCC66;
tmpDiv.style.display=none;
//这里是判断当列里有可拖动的元素时清除前面设置的高度值20px
for(varm=0;m<DragContainer.length;m++){
varcolDiv=document.getElementById(DragContainer[m]);
varcolDivLen=colDiv.getElementsByTagName(div).length
varcolSty=colDiv.getAttribute(style);
if(colDivLen>0&&colSty!=null){
colDiv.removeAttribute(style);
break;
}
}
dragObject=null;
}
}



看看是不是可以拖动了，当你松开鼠标左键时，拖动的元素将回到原来的位置查看拖动页面效果


最后要做的就是让拖动元素不回到原来的位置，而是回到我们拖动的位置。
下面是mousemove事件的所有代码，看看注释就明白了
复制代码 代码如下:
functionmouseMove(){
ev=getEvent();
varmousePos=mouseCoords(ev);
if(dragObject){
//可拖动的个数为1,说明拖动后此列就没有拖动元素，为避免此列没有高度而不见，所以设置其高度为20px
if(dragDivLen==1)dragDiv.style.height=20px;
dragObject.parentNode.style.display=none;
//把拖动的元素加入到临时的tmpDiv中，并设置tmpDiv坐标
for(vari=0;i<tmpDiv.childNodes.length;i++)tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.appendChild(dragObject.cloneNode(true));
tmpDiv.style.width=eleDivW+px;
tmpDiv.style.backgroundColor=#FFFFFF;
tmpDiv.style.display=block;
tmpDiv.style.left=(mousePos.x-mouseOffset.x)+px;
//被拖动对象的中心点的坐标
vardragObjCntX=mousePos.x-mouseOffset.x+parseInt(dragObject.offsetWidth)/2;
vardragObjCntY=mousePos.y-mouseOffset.y+parseInt(dragObject.offsetHeight)/2;
//判断tmpDiv所在的列
vardragConLen=DragContainer.length;
for(vari=0;i<dragConLen;i++){
varcurContainer=document.getElementById(DragContainer[i]);
vardcPos=getPosition(curContainer);
vardcPosMinX=dcPos.x;
vardcPosMinY=dcPos.y;
vardcWidth=curContainer.offsetWidth;
vardcHeight=curContainer.offsetHeight;
vardcPosMaxX=dcPosMinX+dcWidth;
vardcPosMaxY=dcPosMinY+dcHeight;
if(dragObjCntX>dcPosMinX&&dragObjCntX<dcPosMaxX&&dragObjCntY>dcPosMinY&&dragObjCntY<dcPosMaxY){
varactiveContainer=curContainer;
break;
}
}
}
//判断tmpDiv在此列哪个区块范围内
if(activeContainer){
varbeforNode=null;
varsDiv=activeContainer.getElementsByTagName(div)
varacChiLen=sDiv.length;
for(j=acChiLen-1;j>=0;j--){
varactiveDiv=sDiv[j];
if(activeDiv){
varactiveDivPos=getPosition(activeDiv);
varactiveDivMinX=activeDivPos.x;
varactiveDivMinY=activeDivPos.y;
varactiveDivMaxX=activeDivMinX+activeDiv.offsetWidth;
varactiveDivMaxY=activeDivMinY+activeDiv.offsetHeight;
if(activeDivMaxX>dragObjCntX&&activeDivMaxY>dragObjCntY){
//if(dragObjCntX>activeDivMinX&&dragObjCntX<activeDivMaxX&&dragObjCntY>activeDivMinY&&dragObjCntY<activeDivMaxY){
beforNode=activeDiv;
}
}

}
//若此区块存在，就在此区块前插入拖动元素
if(beforNode!=null){
if(dragObject.parentNode!=beforNode){
dragObject.parentNode.style.display=block;
//document.getElementById(test).value=curContainer.id;
}
}
//不存在就在所在列插入拖动元素
else{
curContainer.appendChild(dragObject.parentNode);
dragObject.parentNode.style.display=block;
}
}
returnfalse;
}


好了，一个可以拖动布局的页面就完成了查看最终页面效果

能力有限，有些地方可能说的不清不楚，若有兴趣，自己好好看看代码吧。
有什么不足的地方，请指教。