<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> New Document </title>
</head>
<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;}
</style>
<script language="javascript">
function $(en){
try
{
var el = document.getElementById(en);
if(el)return el;
return false;
}
catch(e)
{
return false;
}
}
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;
}
var lastX;
var lastY;
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 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);//去掉
divao=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;
}
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+">";
评论0