javascript div 拖拽效果实现

xxxxxxxxxx
 
var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
};
//获取相关CSS属性
var getCss = function(o,key){
   return o.currentStyle? o.currentStyle[key] :                                document.defaultView.getComputedStyle(o,false)[key];     
};
​
//拖拽的实现
var startDrag = function(bar, target, callback){
    if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
    }
    if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
    }
    //o是移动对象
    bar.onmousedown = function(event){
        params.flag = true;
        if(!event){
            event = window.event;
            //防止IE文字选中
            bar.onselectstart = function(){
                return false;
            }  
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
    };
    document.onmouseup = function(){
        params.flag = false;    
        if(getCss(target, "left") !== "auto"){
            params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto"){
            params.top = getCss(target, "top");
        }
    };
    document.onmousemove = function(event){
        var e = event ? event: window.event;
        if(params.flag){
            var nowX = e.clientX, nowY = e.clientY;
            var disX = nowX - params.currentX, disY = nowY - params.currentY;
            target.style.left = parseInt(params.left) + disX + "px";
            target.style.top = parseInt(params.top) + disY + "px";
        }
        
        if (typeof callback == "function") {
            callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
        }
    }   
};

JavaScript

xxxxxxxxxx
 
#box{
      position:absolute;
        left:100px; 
        top:100px; 
        padding:5px;
        background:#f0f3f9;
        font-size:12px; 
        -moz-box-shadow:2px 2px 4px #666666; 
        -webkit-box-shadow:2px 2px 4px #666666;
    }
    #main{
      border:1px solid #a0b3d6; 
        background:white;
    }
    #bar{
      line-height:24px; 
        background:#beceeb;
        border-bottom:1px solid #a0b3d6; 
        padding-left:5px; cursor:move;
    }
    #content{
      width:420px; 
        height:250px; 
        padding:10px 5px;
    }

CSS