用javascript做拖动层布局的思路（3）

最后要做的就是让拖动元素不回到原来的位置，而是回到我们拖动的位置。

下面是mousemove事件的所有代码，看看注释就明白了
 

function mouseMove(){
    ev=getEvent();
    var mousePos = mouseCoords(ev);
    if(dragObject){
        //可拖动的个数为1,说明拖动后此列就没有拖动元素，为避免此列没有高度而不见，所以设置其高度为20px
        if(dragDivLen==1) dragDiv.style.height="20px";
        dragObject.parentNode.style.display="none";
        //把拖动的元素加入到临时的tmpDiv中，并设置tmpDiv坐标
        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";
        //被拖动对象的中心点的坐标
        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在此列哪个区块范围内
    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;
                }
            }
            
        }
        //若此区块存在，就在此区块前插入拖动元素
        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;
}

好了，一个可以拖动布局的页面就完成了  

查看最终演示页面及源代码：drag3.html （13.26 KB）

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

有什么不足的地方，请指教。