对表格进行拖拽来交换单元格的数据,呵呵,拷贝下来试试看吧 : ）
1<html>
2<head>
3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
4<title>拖动</title>
5<style>
6td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
7div{font-size:13px;}
8th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
9table{border:1px solid black;font-size:13px;}
10</style>
11<script language="javascript">
12/************************************ dragedTableData.js *******************************/
13/************************************ dragedTableData.js *******************************/
14/*
15* created by LxcJie 2004.4.12
16* 可以实现表格内容的内部拖动
17* 确保中间过度层的存在，id为指定
18*/
19
20/*--------全局变量-----------*/
21var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
22var dragedTable_movable = false;
23var dragedTable_preCell = null;
24var dragedTable_normalColor = null;
25//起始单元格的颜色
26var dragedTable_preColor = "lavender";
27//目标单元格的颜色
28var dragedTable_endColor = "#FFCCFF";
29var dragedTable_movedDiv = "dragedTable_movedDiv";
30var dragedTable_tableId = "";
31/*--------全局变量-----------*/
32
33function DragedTable(tableId)
34{
35dragedTable_tableId = tableId;
36var oTempDiv = document.createElement("div");
37oTempDiv.id = dragedTable_movedDiv;
38oTempDiv.onselectstart = function(){return false};
39oTempDiv.style.cursor = "hand";
40oTempDiv.style.position = "absolute";
41oTempDiv.style.border = "1px solid black";
42oTempDiv.style.backgroundColor = dragedTable_endColor;
43oTempDiv.style.display = "none";
44document.body.appendChild(oTempDiv);
45document.all(tableId).onmousedown = showDiv;
46}
47
48//得到控件的绝对位置
49function getPos(cell)
50{
51var pos = new Array();
52var t=cell.offsetTop;
53var l=cell.offsetLeft;
54while(cell=cell.offsetParent)
55{
56t+=cell.offsetTop;
57l+=cell.offsetLeft;
58}
59pos[0] = t;
60pos[1] = l;
61return pos;
62}
63
64//显示图层
65function showDiv()
66{
67var obj = event.srcElement;
68var pos = new Array();
69//获取过度图层
70var oDiv = document.all(dragedTable_movedDiv);
71if(obj.tagName.toLowerCase() == "td")
72{
73obj.style.cursor = "hand";
74pos = getPos(obj);
75//计算中间过度层位置，赋值
76oDiv.style.width = obj.offsetWidth;
77oDiv.style.height = obj.offsetHeight;
78oDiv.style.top = pos[0];
79oDiv.style.left = pos[1];
80oDiv.innerHTML = obj.innerHTML;
81oDiv.style.display = "";
82dragedTable_x0 = pos[1];
83dragedTable_y0 = pos[0];
84dragedTable_x1 = event.clientX;
85dragedTable_y1 = event.clientY;
86//记住原td
87dragedTable_normalColor = obj.style.backgroundColor;
88obj.style.backgroundColor = dragedTable_preColor;
89dragedTable_preCell = obj;
90
91dragedTable_movable = true;
92}
93}
94function dragDiv()
95{
96if(dragedTable_movable)
97{
98var oDiv = document.all(dragedTable_movedDiv);
99var pos = new Array();
100oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
101oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
102var oTable = document.all(dragedTable_tableId);
103for(var i=0; i<oTable.cells.length; i++)
104{
105if(oTable.cells[i].tagName.toLowerCase() == "td")
106{
107pos = getPos(oTable.cells[i]);
108if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
109&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
110{
111if(oTable.cells[i] != dragedTable_preCell)
112oTable.cells[i].style.backgroundColor = dragedTable_endColor;
113}
114else
115{
116if(oTable.cells[i] != dragedTable_preCell)
117oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
118}
119}
120}
121}
122}
123
124function hideDiv()
125{
126if(dragedTable_movable)
127{
128var oTable = document.all(dragedTable_tableId);
129var pos = new Array();
130if(dragedTable_preCell != null)
131{
132for(var i=0; i<oTable.cells.length; i++)
133{
134pos = getPos(oTable.cells[i]);
135//计算鼠标位置，是否在某个单元格的范围之内
136if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
137&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
138{
139if(oTable.cells[i].tagName.toLowerCase() == "td")
140{
141//交换文本
142dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
143oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
144//清除原单元格和目标单元格的样式
145dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
146oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
147oTable.cells[i].style.cursor = "";
148dragedTable_preCell.style.cursor = "";
149dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
150}
151}
152}
153}
154dragedTable_movable = false;
155//清除提示图层
156document.all(dragedTable_movedDiv).style.display = "none";
157}
158}
159
160document.onmouseup = function()
161{
162hideDiv();
163var oTable = document.all(dragedTable_tableId);
164for(var i=0; i<oTable.cells.length; i++)
165oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
166}
167
168document.onmousemove = function()
169{
170dragDiv();
171}
172
173/************************************ dragedTableData.js 结束 *******************************/
174/************************************ dragedTableData.js 结束 *******************************/
175</script>
176<script language="javascript">
177function init()
178{
179//注册可拖拽表格
180new DragedTable("tableId");
181}
182</script>
183</head>
184<body oncontextmenu="return false;" onload="init()">
185<table align="center" cellpadding="0" cellspacing="0" id="tableId" width="70%">
186<tr>
187<th colspan="4" style="">拖动交换单元格内容</th>
188</tr>
189<tr>
190<td>Java</td>
191<td>Java One </td>
192<td>JBuilder</td>
193<td>Stuts</td>
194</tr>
195<tr>
196<td>C++</td>
197<td>Visual Studio</td>
198<td>Office</td>
199<td>Windows</td>
200</tr>
201<tr>
202<td>PhotoShop</td>
203<td>Java</td>
204<td>Illustrator</td>
205<td>PageMaker</td>
206</tr>
207<tr>
208<td>Cartoon</td>
209<td>Telephone</td>
210<td>China</td>
211<td>USA</td>
212</tr>
213<tr>
214<td>Java</td>
215<td>Java One </td>
216<td>JBuilder</td>
217<td>Stuts</td>
218</tr>
219<tr>
220<td>C++</td>
221<td>Visual Studio</td>
222<td>Office</td>
223<td>Windows</td>
224</tr>
225<tr>
226<td>PhotoShop</td>
227<td>Flash</td>
228<td>Illustrator</td>
229<td>PageMaker</td>
230</tr>
231<tr>
232<td>Cartoon</td>
233<td>Telephone</td>
234<td>China</td>
235<td>USA</td>
236</tr>
237</table>
238</body>
239</html>