记得去年同学开发一个社区网站做博客的时候问到过这个问题 忘记了偶当时怎么"敷衍"的,HOHO,今天刚好看到一篇这样的帖子勒 记在这里,以下贴出代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> New Document </title> </head> <body> <mce:style><!-- *{font-size:12px} .dragTable{ font-size:12px; /*border-top:1px solid #3366cc;*/ margin-bottom: 10px; width:100%; background-color:#FFFFFF; } td{vertical-align:top;} .dragTR{ cursor:move; color:#7787cc; /*background: url(image/a2.gif) white;*/ background-color:#e5eef9; height:18px; padding-left:0px; font-weight:bold; } #parentTable{ letter-spacing:25px; } --></mce:style><style mce_bogus="1">*{font-size:12px} .dragTable{ font-size:12px; /*border-top:1px solid #3366cc;*/ margin-bottom: 10px; width:100%; background-color:#FFFFFF; } td{vertical-align:top;} .dragTR{ cursor:move; color:#7787cc; /*background: url(image/a2.gif) white;*/ background-color:#e5eef9; height:18px; padding-left:0px; font-weight:bold; } #parentTable{ letter-spacing:25px; }</style> <mce:script language="javascript"><!-- /****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/ var draged=false;//初始化,刚开始没有拖动 var mm = null; var ao = null; var tdiv=null;//tdiv为NULL,有下文可知tdiv是拖动的那个半透明的咚咚 var ie = window.navigator.userAgent.indexOf("MSIE") != -1; //拖动开始的函数 function dragStart(ev){ var e = (ev || window.event); ao= e.srcElement || e.currentTarget;//找到被拖动的咚咚 if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent; /* 如果是TD或者是TR,就找他们的容器,DHTML手册上的描述是(container object that defines the offsetTop and offsetLeft properties of the object)。在这里无论TD还是TR,他们所在的容器都是所在的table*/ else return;//如果不是td和tr,那就不拖动了,直接return结束函数了事 draged=true;//拖动开始,设置环境变量为true if(mm != null)clearInterval(mm);//清理时间函数 if(tdiv == null)tdiv=document.createElement("div");//创建div,被拖动的咚咚 tdiv.innerHTML=ao.outerHTML;//把table的内容复制到div里边,注意,嵌套table,这个table是td内部有内容的那个 tdiv.style.display="block"; tdiv.style.position="absolute";//设置position为绝对位置,方便坐标定位来拖动 tdiv.style.backgroundColor = "#ffffff"; if(!ie)tdiv.style.MozOpacity = "0.5"; if(ie)tdiv.style.filter="alpha(opacity=70)";//半透明 tdiv.style.cursor="move";//鼠标样式为拖动 tdiv.style.width=ao.offsetWidth;//设定宽度 tdiv.style.height=ao.offsetHeight;//设定高度 tdiv.style.top=getInfo(ao).top;//设定位置 tdiv.style.left=getInfo(ao).left;//设定位置 document.body.appendChild(tdiv);//在body内加入此div lastX=e.clientX+document.body.scrollLeft;//全局变量,记录事件位置 lastY=e.clientY+document.body.scrollTop;//全局变量,记录事件位置 lastLeft=tdiv.style.left;//全局变量,记录div位置 lastTop=tdiv.style.top;//全局变量,记录div位置 document.onmousemove = draging; document.onmouseup = dragEnd; if (ie) { e.cancelBubble = true; e.returnValue = false; } else { e.preventDefault(); e.stopPropagation(); } return false; } //拖动函数 function draging(ev){//重要:判断MOUSE的位置 if(!draged)return;//如果没拖动,退出函数 var e = (ev || window.event); var tX=e.clientX+document.body.scrollLeft;//记录事件位置 var tY=e.clientY+document.body.scrollTop;//记录事件位置 tdiv.style.left=parseInt(lastLeft)+tX-lastX;//计算并移动tdiv tdiv.style.top=parseInt(lastTop)+tY-lastY;//计算并移动tdiv var parentTable = $("parentTable"); for(var i=0;i<parentTable.rows[0].cells.length;i++){//循环计算判断tdiv和parentTable的两个TD位置 var parentCell=getInfo(parentTable.rows[0].cells[i]);//getInfo是得到位置的函数,得到TD的位置 if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ //判断鼠标是否在TD内部,在内部,就要变换其他的位置了 var subTables=parentTable.rows[0].cells[i].getElementsByTagName("table");//得到TD内部所有的table if(subTables.length==0){//如果没有table if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ parentTable.rows[0].cells[i].appendChild(ao);//把ao给加进td去 } break;//如果加进去后,就不用循环了。注:此时拖动尚未结束,是拖动中,table位置的变化 } for(var j=0;j<subTables.length;j++){//如果有table,还要判断他们的位置 var subTable=getInfo(subTables[j]);//的到table位置 if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){//判断位置 parentTable.rows[0].cells[i].insertBefore(ao,subTables[j]);//加入到此table之前 break; }else{ parentTable.rows[0].cells[i].appendChild(ao);//如果位置在td的最下方,则加入到最后。注:此时拖动尚未结束,是拖动中,table位置的变化 } } } } if (ie) { e.cancelBubble = true; e.returnValue = false; } else { e.preventDefault(); e.stopPropagation(); } return false; } //拖动结束的函数 function dragEnd(ev){ if(!draged)return;//如果没拖动,退出函数 var parentTable = $("parentTable"); //保存顺序 for(var i=0;i<parentTable.rows[0].cells.length;i++){//循环计算判断tdiv和parentTable的两个TD位置 var subTables = parentTable.rows[0].cells[i].getElementsByTagName("table"); for(var j=0;j<subTables.length;j++){ if(subTables[j].id)setcookievalue(subTables[j].id, i + " " + j); } } var e = (ev || window.event); mm=ff(150,15);//恢复位置,就是把div缓缓移动到ao的位置 draged=false;//结束拖动,设置变量为false document.onmousemove = null; document.onmouseup = null; if (ie) { e.cancelBubble = true; e.returnValue = false; } else { e.preventDefault(); e.stopPropagation(); } return false; } //很easy,不说了 function getInfo(o){//取得坐标 var to=new Object(); to.left=to.right=to.top=to.bottom=0; var twidth=o.offsetWidth; var theight=o.offsetHeight; while(o!=document.body){ to.left+=o.offsetLeft; to.top+=o.offsetTop; o=o.offsetParent; } to.right=to.left+twidth; to.bottom=to.top+theight; to.toString=function(){return to.left+":"+to.right+":"+to.top+":"+to.bottom}; return to; } function ff(aa,ab){//从GOOGLE网站来,用于恢复位置 var ac=parseInt(getInfo(tdiv).left);//得到div的位置 var ad=parseInt(getInfo(tdiv).top);//得到div的位置 var ae=(ac-getInfo(ao).left)/ab;//计算要移动的长度 var af=(ad-getInfo(ao).top)/ab;//计算要移动的长度 return setInterval(function(){if(ab<1){//当移动结束的时候 if(mm!= null)clearInterval(mm);//清理时间函数 mm = null; if(tdiv != null)document.body.removeChild(tdiv); //tdiv.removeNode(true);//去掉div ao=null;//把全局变量ao设为Null return//结束时间函数 } //如果移动没有结束 ab--; ac-=ae; ad-=af; //计算此次移动的目的点 tdiv.style.left=parseInt(ac)+"px"; tdiv.style.top=parseInt(ad)+"px" //移动div } ,aa/ab)//注意,这个aa/bb是setInterval的第二个参数,时间参数 } function getcookievalue(sname){ var svalue=""; var sname=sname+"="; if(document.cookie.length>0){ offset=document.cookie.indexOf(sname); if(offset!=-1){ offset+=sname.length; end=document.cookie.indexOf(";",offset); if(end==-1)end=document.cookie.length; svalue=unescape(document.cookie.substring(offset,end)) } } return svalue; } function setcookievalue(sname,svalue){ var expire=""; expire=new Date((new Date()).getTime()+31536000); expire="; expires="+expire.toGMTString()+"; path=/"; document.cookie=sname+"="+escape(svalue)+expire; } function $(en){ try{ var el = document.getElementById(en); if(el)return el; return false; }catch(e){ return false; } } if(window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){ var r=this.ownerDocument.createRange(); r.setStartBefore(this); var df=r.createContextualFragment(sHTML); this.parentNode.replaceChild(df,this); return sHTML; }); HTMLElement.prototype.__defineGetter__("outerHTML",function(){ var attr; var attrs=this.attributes; var str="<"+this.tagName.toLowerCase(); for(var i=0;i<attrs.length;i++){ attr=attrs[i]; if(attr.specified) str+=" "+attr.name+'="'+attr.value+'"'; } if(!this.canHaveChildren) return str+">"; return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">"; }); HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){ switch(this.tagName.toLowerCase()){ case "area": case "base": case "basefont": case "col": case "frame": case "hr": case "img": case "br": case "input": case "isindex": case "link": case "meta": case "param": return false; } return true; }); } //给table们加上事件 function inint(){//初始化 var parentTable = $("parentTable"); for(var i=0;i<parentTable.rows[0].cells.length;i++){//循环计算判断tdiv和parentTable的两个TD位置 var subTables = parentTable.rows[0].cells[i].getElementsByTagName("table"); for(var j=0;j<subTables.length;j++){ if(subTables[j].className!="dragTable")continue; subTables[j].rows[0].className="dragTR"; subTables[j].rows[0].onmousedown = dragStart; } } var ao = null; var ob = new Array; var len = 0; var gmail = getcookievalue("gmail"); if(gmail){ if(!isNaN(gmail.split(" ")[0])){ len = ob.length || 0; ob[len] = new Object(); ob[len].id="gmail"; ob[len].cells = gmail.split(" ")[0]; ob[len].index = gmail.split(" ")[1]; } } var xlty = getcookievalue("xlty"); if(xlty){ if(!isNaN(xlty.split(" ")[0])){ len = ob.length || 0; ob[len] = new Object(); ob[len].id="xlty"; ob[len].cells = xlty.split(" ")[0]; ob[len].index = xlty.split(" ")[1]; } } var zd = getcookievalue("zd"); if(zd){ if(!isNaN(zd.split(" ")[0])){ len = ob.length || 0; ob[len] = new Object(); ob[len].id="zd"; ob[len].cells = zd.split(" ")[0]; ob[len].index = zd.split(" ")[1]; } } var zgczx = getcookievalue("zgczx"); if(zgczx){ if(!isNaN(zgczx.split(" ")[0])){ len = ob.length || 0; ob[len] = new Object(); ob[len].id="zgczx"; ob[len].cells = zgczx.split(" ")[0]; ob[len].index = zgczx.split(" ")[1]; } } for(var i = 0; i < ob.length - 1; i ++){ for(var j = i + 1; j < ob.length; j ++){ if(ob[i].index > ob[j].index){ var temp = ob[i]; ob[i]=ob[j]; ob[j]=temp; } } } for(var i = 0; i < ob.length; i ++){ ao = $(ob[i].id); subTables = parentTable.rows[0].cells[ob[i].cells].getElementsByTagName("table"); if(subTables.length && ob[i].index < subTables.length){ parentTable.rows[0].cells[ob[i].cells].insertBefore(ao,subTables[ob[i].index]); }else{ parentTable.rows[0].cells[ob[i].cells].appendChild(ao); } } } // --></mce:script> <body > <div id="content-top" style="background-color:#33FFFF " mce_style="background-color:#33FFFF "></div> <table width="812" height=601 border="0" align="center" cellpadding="0" cellspacing="2" id="parentTable"> <tr > <td width="263" valgin="top"> <table width="263" border=0 cellspacing="0" class="dragTable" style="border:1px solid #D5D5D5" mce_style="border:1px solid #D5D5D5" id="gmail"> <tr> <td height="25" colspan="2" >GMAIL</td> </tr> <tr> <td width="118" height="190"><img src="Image/peo01.jpg" mce_src="Image/peo01.jpg" width="100%" height="90%"><br/> </td> <td width="139">暂时无法显示GMAIL内容</td> <tr> </table> <table border=0 class="dragTable" cellspacing="0" style="border:1px solid #D5D5D5" mce_style="border:1px solid #D5D5D5" id="xlty"> <tr> <td>新浪体育</td> </tr> <tr> <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td> <tr> </table> <table border=0 class="dragTable" cellspacing="0" style="border:1px solid #D5D5D5" mce_style="border:1px solid #D5D5D5" id="zd"> <tr> <td height="20">焦点</td> </tr> <tr> <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选 解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td> <tr> </table> </td> <td width="594"><table width="100%" border=0 cellpadding="0" cellspacing="0" class="dragTable" id="zgczx"> <tr> <td width="2%"><img src="Image/ww_1.jpg" mce_src="Image/ww_1.jpg" width="12" height="25"></td> <td width="90%" height="25" > 中关村在线</td> <td width="8%" valign="top" ><img src="Image/ww_3.jpg" mce_src="Image/ww_3.jpg" width="45" height="25"></td> </tr> <tr> <td colspan="3"><table width="100%" border="0" align="center" cellpadding="2" cellspacing="2" style="border:1px solid #D5D5D5" mce_style="border:1px solid #D5D5D5"> <tr > <td bgcolor="#FFFFFF" >新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td> </tr> <tr > <td bgcolor="#FFFFFF" > </td> </tr> </table></td> <tr> </table></td> </tr> </table> <mce:script language="JavaScript"><!-- inint(); // --></mce:script> </body> </html>