用JQuery 实现拖拽

[lpsky_123]

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

[shaoliang520xi]

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

[shaoliang520xi]

刚才是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/[e-mail]
调用方法: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";
}
}
}();

[feiliubo]

楼上的正解

[chl19871024]

看下 看下！