用javascript做拖動布局的思路

更新時間：2008年05月31日 00:01:47 作者：

這幾天不是很忙，就找了些拖動布局方面的資料看看，也學(xué)著寫了個拖動布局的效果，沒想到花了好多時間，七拼八湊，總算是把這個效果寫出來了。哎！還是js的功夫太差。因?yàn)槭沁呎屹Y料邊寫的，很多地方印象不深，時間一長，再重新寫估計(jì)也難，所以把當(dāng)時的思路記錄一下！也希望大蝦指點(diǎn)一下！

好了，轉(zhuǎn)入正文，在開始之前先介紹幾個功能函數(shù)！
1.格式化事件的函數(shù)

復(fù)制代碼代碼如下:

function getEvent(){  
     //同時兼容ie和ff的寫法  
     if(document.all)    return window.event;  
     func=getEvent.caller;  
     while(func!=null){  
         var arg0=func.arguments[0];  
         if(arg0){  
             if((arg0.constructor==Event || arg0.constructor ==MouseEvent)  
                || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){      
                return arg0;  
              }  
         }  
          func=func.caller;  
        }  
        return null;  
} 

2.取得鼠標(biāo)的位置

復(fù)制代碼代碼如下:

function mouseCoords(ev){  
    if(ev.pageX || ev.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.得到元素的位置

復(fù)制代碼代碼如下:

function getPosition(ele){  
    var left = 0;  
    var top = 0;  
    while (ele.offsetParent){  
        left += ele.offsetLeft;  
        top += ele.offsetTop;  
        ele = ele.offsetParent;  
    }  
    left += ele.offsetLeft;  
    top += ele.offsetTop;  
    return {x:left, y:top};  
} 

首先，當(dāng)然是寫好初始布局的頁面，查看初始頁面效果

一般拖動的元素是跟隨鼠標(biāo)的，我的思路是在把拖動的元素增加到一個position為absolute的div中，
鼠標(biāo)拖動的時候就讓它的位置根據(jù)鼠標(biāo)的坐標(biāo)變化就可以了。所以在頁面增加了個onload

復(fù)制代碼代碼如下:

var tmpDiv=null;//臨時存放拖動對象的div  
window.onload=function(){  
    tmpDiv=document.createElement("div");  
    tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;';  
    document.body.appendChild(tmpDiv);  
} 

要實(shí)現(xiàn)拖動，首先觸發(fā)的事件是mouseDown,所以我在拖動的table的一個td上綁定了onmousedown="mouseDown(this);"

程序代碼

復(fù)制代碼代碼如下:

var dragObject = null;//拖動的元素(table)  
var mouseOffset = null;//鼠標(biāo)的在拖動元素中的位置  
var dragDiv=null;//拖動的table所在的列的div  
var eleDivW=null;//拖動的table的父節(jié)點(diǎn)(div)的高度  
var dragDivLen=null;//拖動的table所在的列的div中用來放置table的div的個數(shù)  
var DragContainer=["col1","col2","col3"];//用來實(shí)現(xiàn)列布局的div的id  
//鼠標(biāo)按下拖動的元素  
function mouseDown(elem){  
    ev=getEvent();  
    dragObject = elem.parentNode.parentNode.parentNode;//被拖動的table  
    dragDiv=dragObject.parentNode.parentNode;  
    //拖動元素所在列里div的個數(shù)  
    dragDivLen=dragDiv.getElementsByTagName("div").length;  
    mouseOffset = getMouseOffset(dragObject, ev);  
    eleDivW=dragObject.parentNode.offsetWidth;  
    dragObject.parentNode.style.border="1px dotted #FFCC66";  
    return false;  
}  
//得到鼠標(biāo)在拖動元素中的位置  
function getMouseOffset(target, ev){  
    var docPos = getPosition(target);  
    var mousePos = mouseCoords(ev);  
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};  
} 

剩下的當(dāng)然就是鼠標(biāo)移動拖動對象也能移動，用到的當(dāng)然就是mouseMove咯，為簡單我在document上綁定，

復(fù)制代碼代碼如下:

document.onmousemove = mouseMove;  
function mouseMove(){  
    ev=getEvent();  
    var mousePos = mouseCoords(ev);  
    if(dragObject){  
        dragObject.parentNode.style.display="none";//設(shè)置放置被拖動table的div隱藏  
        //把拖動的table放到臨時的div中，并設(shè)置其坐標(biāo)  
        for(var i=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.top = (mousePos.y - mouseOffset.y)+"px";  
        tmpDiv.style.left = (mousePos.x - mouseOffset.x)+"px";  
    }  
    return false;  
} 

有了mousemove當(dāng)然少不了mouseup

復(fù)制代碼代碼如下:

document.onmouseup = mouseUp;  
//鼠標(biāo)松開  
function mouseUp(){  
    if(dragObject){  
        if(dragObject.parentNode.style.display=="none") dragObject.parentNode.style.display="block";  
        dragObject.parentNode.style.border="1px solid #FFCC66";  
        tmpDiv.style.display="none";  
        //這里是判斷當(dāng)列里有可拖動的元素時清除前面設(shè)置的高度值20px  
        for(var m=0;m<DragContainer.length;m++){  
            var colDiv=document.getElementById(DragContainer[m]);  
            var colDivLen=colDiv.getElementsByTagName("div").length  
            var colSty=colDiv.getAttribute("style");  
            if(colDivLen>0&&colSty!=null){  
                colDiv.removeAttribute("style");  
                break;  
            }  
        }  
        dragObject=null;  
    }  
} 

看看是不是可以拖動了，當(dāng)你松開鼠標(biāo)左鍵時，拖動的元素將回到原來的位置查看拖動頁面效果

最后要做的就是讓拖動元素不回到原來的位置，而是回到我們拖動的位置。
下面是mousemove事件的所有代碼，看看注釋就明白了

復(fù)制代碼代碼如下:

function mouseMove(){  
    ev=getEvent();  
    var mousePos = mouseCoords(ev);  
    if(dragObject){  
        //可拖動的個數(shù)為1,說明拖動后此列就沒有拖動元素，為避免此列沒有高度而不見，所以設(shè)置其高度為20px  
        if(dragDivLen==1) dragDiv.style.height="20px";  
        dragObject.parentNode.style.display="none";  
        //把拖動的元素加入到臨時的tmpDiv中，并設(shè)置tmpDiv坐標(biāo)  
        for(var i=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.top = (mousePos.y - mouseOffset.y)+"px";  
        tmpDiv.style.left = (mousePos.x - mouseOffset.x)+"px";  
        //被拖動對象的中心點(diǎn)的坐標(biāo)  
        var dragObjCntX=mousePos.x - mouseOffset.x+parseInt(dragObject.offsetWidth)/2;  
        var dragObjCntY=mousePos.y - mouseOffset.y+parseInt(dragObject.offsetHeight)/2;  
        //判斷tmpDiv所在的列  
        var dragConLen=DragContainer.length;  
        for(var i=0;i<dragConLen;i++){  
            var curContainer=document.getElementById(DragContainer[i]);  
            var dcPos=getPosition(curContainer);  
            var dcPosMinX=dcPos.x;  
            var dcPosMinY=dcPos.y;  
            var dcWidth=curContainer.offsetWidth;  
            var dcHeight=curContainer.offsetHeight;  
            var dcPosMaxX=dcPosMinX+dcWidth;  
            var dcPosMaxY=dcPosMinY+dcHeight;  
            if(dragObjCntX>dcPosMinX&&dragObjCntX<dcPosMaxX&&dragObjCntY>dcPosMinY&&dragObjCntY<dcPosMaxY){  
                var activeContainer=curContainer;  
                break;  
            }  
        }  
    }  
    //判斷tmpDiv在此列哪個區(qū)塊范圍內(nèi)  
    if(activeContainer){  
        var beforNode=null;  
        var sDiv=activeContainer.getElementsByTagName("div")  
        var acChiLen=sDiv.length;  
        for(j=acChiLen-1;j>=0;j--){  
            var activeDiv=sDiv[j];  
            if(activeDiv){  
                var activeDivPos=getPosition(activeDiv);  
                var activeDivMinX=activeDivPos.x;  
                var activeDivMinY=activeDivPos.y;  
                var activeDivMaxX=activeDivMinX+activeDiv.offsetWidth;  
                var activeDivMaxY=activeDivMinY+activeDiv.offsetHeight;  
                if(activeDivMaxX>dragObjCntX&&activeDivMaxY>dragObjCntY){  
                //if(dragObjCntX>activeDivMinX&&dragObjCntX<activeDivMaxX&&dragObjCntY>activeDivMinY&&dragObjCntY<activeDivMaxY){  
                    beforNode=activeDiv;  
                }  
            }  

        }  
        //若此區(qū)塊存在，就在此區(qū)塊前插入拖動元素  
        if(beforNode!=null){  
            if(dragObject.parentNode!=beforNode){  
                curContainer.insertBefore(dragObject.parentNode,beforNode);  
                dragObject.parentNode.style.display="block";  
                //document.getElementById("test").value=curContainer.id;  
            }  
        }  
        //不存在就在所在列插入拖動元素  
        else{  
            curContainer.appendChild(dragObject.parentNode);  
            dragObject.parentNode.style.display="block";  
        }  
    }  
    return false;  
} 