用JQuery 实现拖拽

Question

用JQuery 实现各个模块的拖拽， 像在www.163.com上输入账号密码 跳转到的界面一样。
邮箱、博客、相册 等模块的拖拽。给个例子，哥在线等。

Answer 1

jquery.easydrag.handler.beta2.js
插件你百度一下就知道怎么用了

Answer 2

刚才是Jquery插件。现在这个是JS
/*
设置居中
*/
function setLayoutCenter(layerName){
    document.getElementById(layerName).style.left=(document.body.clientWidth-240)/2;
    var x = (document.getElementById(layerName).style.left).replace("px","");//浮动层固定于浏览器的x方向位置(从左往右)
    var y = 150;//浮动层固定于浏览器的y方向位置(从上往下)
    var diff = (parent.frames['mainFrame'].document.body.scrollTop + y - document.getElementById(layerName).style.posTop)*.20;
    var y = parent.frames['mainFrame'].document.body.scrollTop + y - diff;
    eval("document.all." + layerName + ".style.posTop = y");
    eval("document.all." + layerName + ".style.posLeft = x");//移动层
}/*
滚动条顶部高度
*/
function getScrollTopHeight() {    
    var scrollTopHeight = 0;     
    if (typeof window.pageYOffset != 'undefined') {     
        scrollTopHeight = window.pageYOffset;     
    }     
    else if (typeof window.document.compatMode != 'undefined' &&     
       window.document.compatMode != 'BackCompat') {     
       scrollTopHeight = window.document.documentElement.scrollTop;     
    }     
    else if (typeof window.document.body != 'undefined') {     
       scrollTopHeight = window.document.body.scrollTop;     
    }     
    return scrollTopHeight;    
}
function getScrolls() 
{     
var sTop = 0, sLeft = 0, sWidth = 0, sHeight = 0; 
        
sTop = (document.body.scrollTop > document.documentElement.scrollTop)? document.body.scrollTop:document.documentElement.scrollTop;
if( isNaN(sTop) || sTop <0 ){ sTop = 0 ;}
        
sLeft = (document.body.scrollLeft > document.documentElement.scrollLeft )? document.body.scrollLeft:document.documentElement.scrollLeft;
if( isNaN(sLeft) || sLeft <0 ){ sLeft = 0 ;}

return { sTop:sTop, sLeft: sLeft, sWidth: sWidth, sHeight: sHeight }; 
}
/*层居中*/
function setCenter(name){
   var sc=getScrolls();
   var h1 = document.body.clientHeight;
   var h2 = document.documentElement.clientHeight;
   var isXhtml = (h2<=h1&&h2!=0)?true:false; //判断当前页面的Doctype是否为Xhtml
   var myBody = isXhtml?document.documentElement:document.body;
   var yy=myBody.clientHeight;
   var xx=myBody.clientWidth;
   var myobj=document.getElementById(name);
   var objhh=myobj.offsetHeight;
   var objww=myobj.offsetWidth;
   if(self!=top){
       if(objhh>yy)
         yy+=Math.abs(objhh-yy)+10;
   }
   myobj.style.position = "absolute";
   myobj.style.top=(yy-objhh)/2 + sc.sTop + "px";
   myobj.style.left=(xx-objww)/2 + "px";
}   
        
/*
鼠标拖动层(可任意绑定DIV标签)
联系方式:1034555083/[email protected]
调用方法:var myDrag=new Endrag(source,target,offSetX, offSetY);
参数说明:source--鼠标动作绑定对象;target--操作目标对象(要移动的对象);offSetX--横坐标偏移;offSetY--纵坐标偏移
说明:通过多次调用本方法绑定多个对象的拖动
*/
funs={
    index:1001,  
    getFocus:function (target){  
        if(target.style.zIndex!=this.index){  
            this.index += 2;  
            var idx = this.index;  
            target.style.zIndex=idx;  
        }  
    },
    abs:function (element) {
        var result = { x: element.offsetLeft, y: element.offsetTop};
        element = element.offsetParent;
        while (element) {
            result.x += element.offsetLeft;
            result.y += element.offsetTop;
            element = element.offsetParent;
        }
        return result;
    }
};
function dragDialog(source,target,offSetX, offSetY){
    source=typeof(source)=="object" ? source:document.getElementById(source);
    target=typeof(target)=="object" ? target:document.getElementById(target);
    var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100,NS=(navigator.appName=='Netscape');
    offSetX=typeof offSetX== "undefined" ? 0:offSetX;
    offSetY=typeof offSetY== "undefined" ? 0:offSetY;
    source.onmousedown=function(e){
        e = e ? e : (window.event ? window.event : null);
        funs.getFocus(target); 
        if(e.button==(NS)?0 :1)  { 
            if(!NS){this.setCapture()}
            x0 = e.clientX ;  
            y0 = e.clientY ;  
            x1 = parseInt(funs.abs(target).x);  
            y1 = parseInt(funs.abs(target).y);    
            moveable = true;  
        }  
    };  
    //拖动;  
    source.onmousemove=function(e){
        e = e ? e : (window.event ? window.event : null);  
        if(moveable){  
            target.style.left = (x1 + e.clientX - x0 - offSetX) + "px";  
            target.style.top  = (y1 + e.clientY - y0 - offSetY) + "px";  
        }  
    }; 
    //停止拖动;  
    source.onmouseup=function (e){ 
        if(moveable)  {  
            if(!NS){this.releaseCapture();}
            moveable = false;  
        }  
    };
}mask= function(){
    var mybg;
    return {
        show:function(){
            if(!mybg){
                mybg = document.createElement("div"); 
                mybg.setAttribute("id","maskBodyBg"); 
                mybg.style.background = "#000"; 
                mybg.style.width = "100%"; 
                mybg.style.height = document.body.clientHeight + "px"; 
                mybg.style.position = "absolute"; 
                mybg.style.top = "0"; 
                mybg.style.left = "0"; 
                mybg.style.zIndex = "1000"; 
                mybg.style.opacity = "0.3"; 
                mybg.style.filter = "Alpha(opacity=30)";
                document.body.style.overflow = "hidden"; 
                document.body.appendChild(mybg);
            }
            mybg.style.display="block"; 
        },
        hide:function(){
            var oBg=document.getElementById("maskBodyBg");
            if(oBg)
                oBg.style.display="none";
        }
    }
}();