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

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

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);
}

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

var dragObject = null;//拖动的元素(table)
var mouseOffset = null;//鼠标的在拖动元素中的位置
var dragDiv=null;//拖动的table所在的列的div
var eleDivW=null;//拖动的table的父节点(div)的高度
var dragDivLen=null;//拖动的table所在的列的div中用来放置table的div的个数
var DragContainer=["col1","col2","col3"];//用来实现列布局的div的id
//鼠标按下拖动的元素
function mouseDown(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="1px dotted #FFCC66";
    return false;
}
//得到鼠标在拖动元素中的位置
function getMouseOffset(target, ev){
    var docPos = getPosition(target);
    var mousePos = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

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

document.onmousemove = mouseMove;
function mouseMove(){
    ev=getEvent();
    var mousePos = mouseCoords(ev);
    if(dragObject){
        dragObject.parentNode.style.display="none";//设置放置被拖动table的div隐藏
        //把拖动的table放到临时的div中，并设置其坐标
        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当然少不了mouseup
document.onmouseup = mouseUp;
//鼠标松开
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";
        //这里是判断当列里有可拖动的元素时清除前面设置的高度值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;
    }
}

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

查看演示二：drag2.html （11.05 KB）