1
<html>
2<head>
3<title>DRAG the DIV</title>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5
<style>
6
*{}{font-size:12px}
7.dragTable{}{
8
font-size:12px;
9border-top:1px solid #3366cc;
10margin-bottom: 10px;
11width:100%;
12background-color:#FFFFFF;
13
}
14td{}{vertical-align:top;}
15.dragTR{}{
16cursor:move;
17color:#7787cc;
18background-color:#e5eef9;
19height:20px;
20padding-left:5px;
21font-weight:bold;
22}
23#parentTable{}{
24border-collapse:collapse;
25letter-spacing:25px;
26
}
27</style>
28<script defer>
29/**//****netxiu************E-MAIL:txidea.com****QQ:5734213***********/
30var Drag={dragged:false,
31 ao:null,
32 tdiv:null,
33dragStart:function(){
34Drag.ao=event.srcElement;
35if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
36 Drag.ao=Drag.ao.offsetParent;
37 Drag.ao.style.zIndex=100;
38}else
39 return;
40Drag.dragged=true;
41Drag.tdiv=document.createElement("div");
42Drag.tdiv.innerHTML=Drag.ao.outerHTML;
43Drag.ao.style.border="1px dashed red";
44Drag.tdiv.style.display="block";
45Drag.tdiv.style.position="absolute";
46Drag.tdiv.style.filter="alpha(opacity=70)";
47Drag.tdiv.style.cursor="move";
48Drag.tdiv.style.border="1px solid #000000";
49Drag.tdiv.style.width=Drag.ao.offsetWidth;
50Drag.tdiv.style.height=Drag.ao.offsetHeight;
51Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
52Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
53document.body.appendChild(Drag.tdiv);
54Drag.lastX=event.clientX;
55Drag.lastY=event.clientY;
56Drag.lastLeft=Drag.tdiv.style.left;
57Drag.lastTop=Drag.tdiv.style.top;
58},
59
60draging:function(){//重要:判断MOUSE的位置
61if(!Drag.dragged||Drag.ao==null)return;
62var tX=event.clientX;
63var tY=event.clientY;
64Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
65Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
66for(var i=0;i<parentTable.cells.length;i++){
67 var parentCell=Drag.getInfo(parentTable.cells[i]);
68 if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
69 var subTables=parentTable.cells[i].getElementsByTagName("table");
70 if(subTables.length==0){
71 if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
72 parentTable.cells[i].appendChild(Drag.ao);
73 }
74 break;
75 }
76 for(var j=0;j<subTables.length;j++){
77 var subTable=Drag.getInfo(subTables[j]);
78 if(tX>=subTable.left && tX<=subTable.right && tY>=subTable.top && tY<=subTable.bottom){
79 parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
80 break;
81 }else{
82 parentTable.cells[i].appendChild(Drag.ao);
83 }
84 }
85 }
86}
87}
88,
89dragEnd:function(){
90if(!Drag.dragged)return;
91Drag.dragged=false;
92Drag.mm=Drag.repos(150,15);
93Drag.ao.style.borderWidth="0px";
94Drag.ao.style.borderTop="1px solid #3366cc";
95Drag.tdiv.style.borderWidth="0px";
96Drag.ao.style.zIndex=1;
97},
98getInfo:function(o){//取得坐标
99var to=new Object();
100to.left=to.right=to.top=to.bottom=0;
101var twidth=o.offsetWidth;
102var theight=o.offsetHeight;
103while(o!=document.body){
104 to.left+=o.offsetLeft;
105 to.top+=o.offsetTop;
106 o=o.offsetParent;
107}
108 to.right=to.left+twidth;
109 to.bottom=to.top+t
<html>2
<head>3
<title>DRAG the DIV</title>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">5
<style>6
*{}{font-size:12px}7
.dragTable{}{8
font-size:12px;9
border-top:1px solid #3366cc;10
margin-bottom: 10px;11
width:100%;12
background-color:#FFFFFF;13
}14
td{}{vertical-align:top;}15
.dragTR{}{16
cursor:move;17
color:#7787cc;18
background-color:#e5eef9;19
height:20px;20
padding-left:5px;21
font-weight:bold;22
}23
#parentTable{}{24
border-collapse:collapse;25
letter-spacing:25px;26
}27
</style>28
<script defer>29
/**//****netxiu************E-MAIL:txidea.com****QQ:5734213***********/30
var Drag={dragged:false,31
ao:null,32
tdiv:null,33
dragStart:function(){34
Drag.ao=event.srcElement;35
if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){36
Drag.ao=Drag.ao.offsetParent;37
Drag.ao.style.zIndex=100;38
}else39
return;40
Drag.dragged=true;41
Drag.tdiv=document.createElement("div");42
Drag.tdiv.innerHTML=Drag.ao.outerHTML;43
Drag.ao.style.border="1px dashed red";44
Drag.tdiv.style.display="block";45
Drag.tdiv.style.position="absolute";46
Drag.tdiv.style.filter="alpha(opacity=70)";47
Drag.tdiv.style.cursor="move";48
Drag.tdiv.style.border="1px solid #000000";49
Drag.tdiv.style.width=Drag.ao.offsetWidth;50
Drag.tdiv.style.height=Drag.ao.offsetHeight;51
Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;52
Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;53
document.body.appendChild(Drag.tdiv);54
Drag.lastX=event.clientX;55
Drag.lastY=event.clientY;56
Drag.lastLeft=Drag.tdiv.style.left;57
Drag.lastTop=Drag.tdiv.style.top;58
},59
60
draging:function(){//重要:判断MOUSE的位置61
if(!Drag.dragged||Drag.ao==null)return;62
var tX=event.clientX;63
var tY=event.clientY;64
Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;65
Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;66
for(var i=0;i<parentTable.cells.length;i++){67
var parentCell=Drag.getInfo(parentTable.cells[i]);68
if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){69
var subTables=parentTable.cells[i].getElementsByTagName("table");70
if(subTables.length==0){71
if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){72
parentTable.cells[i].appendChild(Drag.ao);73
}74
break;75
}76
for(var j=0;j<subTables.length;j++){77
var subTable=Drag.getInfo(subTables[j]);78
if(tX>=subTable.left && tX<=subTable.right && tY>=subTable.top && tY<=subTable.bottom){79
parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);80
break;81
}else{82
parentTable.cells[i].appendChild(Drag.ao);83
} 84
}85
}86
}87
}88
,89
dragEnd:function(){90
if(!Drag.dragged)return;91
Drag.dragged=false;92
Drag.mm=Drag.repos(150,15);93
Drag.ao.style.borderWidth="0px";94
Drag.ao.style.borderTop="1px solid #3366cc";95
Drag.tdiv.style.borderWidth="0px";96
Drag.ao.style.zIndex=1;97
},98
getInfo:function(o){//取得坐标99
var to=new Object();100
to.left=to.right=to.top=to.bottom=0;101
var twidth=o.offsetWidth;102
var theight=o.offsetHeight;103
while(o!=document.body){104
to.left+=o.offsetLeft;105
to.top+=o.offsetTop;106
o=o.offsetParent;107
}108
to.right=to.left+twidth;109
to.bottom=to.top+t