Javascript制作拖动网页浅谈

这几天不是很忙，就找了些拖动布局方面的资料看看，也学着写了个拖动布局的效果，没想到花了好多时间，
七拼八凑，总算是把这个效果写出来了。哎！还是js的功夫太差。因为是边找资料边写的，很多地方印象不深，
时间一长，再重新写估计也难，所以把当时的思路记录一下！也希望大虾指点一下！

好了，转入正文，在开始之前先介绍几个功能函数！
1.格式化事件的函数
程序代码

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.取得鼠标的位置
程序代码

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.得到元素的位置
程序代码

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

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

一般拖动的元素是跟随鼠标的，我的思路是在把拖动的元素增加到一个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);