一个对表格进行拖拽来交换单元格数据的脚本
2024-07-21 02:23:21
供稿：网友
对表格进行拖拽来交换单元格的数据,呵呵,拷贝下来试试看吧 : ）
<!-- 欢迎转载,请保留作者及其出处,谢谢 -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>拖动</title>
<style>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#cccccc}
table{border:1px solid black;font-size:13px;}
</style>
<script language="javascript">
/************************************ dragedtabledata.js *******************************/
/************************************ dragedtabledata.js *******************************/
/*
* created by lxcjie 2004.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在，id为指定
*/
/*--------全局变量-----------*/
var dragedtable_x0,dragedtable_y0,dragedtable_x1,dragedtable_y1;
var dragedtable_movable = false;
var dragedtable_precell = null;
var dragedtable_normalcolor = null;
//起始单元格的颜色
var dragedtable_precolor = "lavender";
//目标单元格的颜色
var dragedtable_endcolor = "#ffccff";
var dragedtable_moveddiv = "dragedtable_moveddiv";
var dragedtable_tableid = "";
/*--------全局变量-----------*/
function dragedtable(tableid)
{
dragedtable_tableid = tableid;
var otempdiv = document.createelement("div");
otempdiv.id = dragedtable_moveddiv;
otempdiv.onselectstart = function(){return false};
otempdiv.style.cursor = "hand";
otempdiv.style.position = "absolute";
otempdiv.style.border = "1px solid black";
otempdiv.style.backgroundcolor = dragedtable_endcolor;
otempdiv.style.display = "none";
document.body.appendchild(otempdiv);
document.all(tableid).onmousedown = showdiv;
}
//得到控件的绝对位置
function getpos(cell)
{
var pos = new array();
var t=cell.offsettop;
var l=cell.offsetleft;
while(cell=cell.offsetparent)
{
t+=cell.offsettop;
l+=cell.offsetleft;
}
pos[0] = t;
pos[1] = l;
return pos;
}
//显示图层
function showdiv()
{
var obj = event.srcelement;
var pos = new array();
//获取过度图层
var odiv = document.all(dragedtable_moveddiv);
if(obj.tagname.tolowercase() == "td")
{
obj.style.cursor = "hand";
pos = getpos(obj);
//计算中间过度层位置，赋值
odiv.style.width = obj.offsetwidth;
odiv.style.height = obj.offsetheight;
odiv.style.top = pos[0];
odiv.style.left = pos[1];
odiv.innerhtml = obj.innerhtml;
odiv.style.display = "";
dragedtable_x0 = pos[1];
dragedtable_y0 = pos[0];
dragedtable_x1 = event.clientx;
dragedtable_y1 = event.clienty;
//记住原td
dragedtable_normalcolor = obj.style.backgroundcolor;
obj.style.backgroundcolor = dragedtable_precolor;
dragedtable_precell = obj;
dragedtable_movable = true;
}
}
function dragdiv()
{
if(dragedtable_movable)
{
var odiv = document.all(dragedtable_moveddiv);
var pos = new array();
odiv.style.top = event.clienty - dragedtable_y1 + dragedtable_y0;
odiv.style.left = event.clientx - dragedtable_x1 + dragedtable_x0;
var otable = document.all(dragedtable_tableid);
for(var i=0; i<otable.cells.length; i++)
{
if(otable.cells[i].tagname.tolowercase() == "td")
{
pos = getpos(otable.cells[i]);
if(event.x>pos[1]&&event.x<pos[1]+otable.cells[i].offsetwidth
&& event.y>pos[0]&& event.y<pos[0]+otable.cells[i].offsetheight)
{
if(otable.cells[i] != dragedtable_precell)
otable.cells[i].style.backgroundcolor = dragedtable_endcolor;
}
else
{
if(otable.cells[i] != dragedtable_precell)
otable.cells[i].style.backgroundcolor = dragedtable_normalcolor;
}
}
}
}
}
function hidediv()
{
if(dragedtable_movable)
{
var otable = document.all(dragedtable_tableid);
var pos = new array();
if(dragedtable_precell != null)
{
for(var i=0; i<otable.cells.length; i++)
{
pos = getpos(otable.cells[i]);
//计算鼠标位置，是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+otable.cells[i].offsetwidth
&& event.y>pos[0]&& event.y<pos[0]+otable.cells[i].offsetheight)
{
if(otable.cells[i].tagname.tolowercase() == "td")
{
//交换文本
dragedtable_precell.innerhtml = otable.cells[i].innerhtml;
otable.cells[i].innerhtml = document.all(dragedtable_moveddiv).innerhtml;
//清除原单元格和目标单元格的样式
dragedtable_precell.style.backgroundcolor = dragedtable_normalcolor;
otable.cells[i].style.backgroundcolor = dragedtable_normalcolor;
otable.cells[i].style.cursor = "";
dragedtable_precell.style.cursor = "";
dragedtable_precell.style.backgroundcolor = dragedtable_normalcolor;
}
}
}
}
dragedtable_movable = false;
//清除提示图层
document.all(dragedtable_moveddiv).style.display = "none";
}
}
document.onmouseup = function()
{
hidediv();
var otable = document.all(dragedtable_tableid);
for(var i=0; i<otable.cells.length; i++)
otable.cells[i].style.backgroundcolor = dragedtable_normalcolor;
}
document.onmousemove = function()
{
dragdiv();
}
/************************************ dragedtabledata.js 结束 *******************************/
/************************************ dragedtabledata.js 结束 *******************************/
</script>
<script language="javascript">
function init()
{
//注册可拖拽表格
new dragedtable("tableid");
}
</script>
</head>
<body oncontextmenu="return false;" onload="init()">
<table id="tableid" width="70%" align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="4" style="">拖动交换单元格内容</th>
</tr>
<tr>
<td>java</td>
<td>java one </td>
<td>jbuilder</td>
<td>stuts</td>
</tr>
<tr>
<td>c++</td>
<td>visual studio</td>
<td>office</td>
<td>windows</td>
</tr>
<tr>
<td>photoshop</td>
<td>java</td>
<td>illustrator</td>
<td>pagemaker</td>
</tr>
<tr>
<td>cartoon</td>
<td>telephone</td>
<td>china</td>
<td>usa</td>
</tr>
<tr>
<td>java</td>
<td>java one </td>
<td>jbuilder</td>
<td>stuts</td>
</tr>
<tr>
<td>c++</td>
<td>visual studio</td>
<td>office</td>
<td>windows</td>
</tr>
<tr>
<td>photoshop</td>
<td>flash</td>
<td>illustrator</td>
<td>pagemaker</td>
</tr>
<tr>
<td>cartoon</td>
<td>telephone</td>
<td>china</td>
<td>usa</td>
</tr>
</table>
</body>
</html>
