Cell | script | Data drag and drop tables to Exchange cell data, hehe, copy it and try it out:
<!--Welcome to reprint, please retain the author and its origin, thank you-->
<HTML>
<HEAD>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<TITLE> Drag </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
* Can implement the internal drag of table contents
* Ensure the presence of the intermediate excess layer, ID is specified
*/
/*--------global variable-----------* *
var dragedtable_x0,dragedtable_y0,dragedtable_x1,dragedtable_y1;
var dragedtable_movable = false;
var Dragedtable_precell = null;
var dragedtable_normalcolor = null;
Color of the Starting cell
var dragedtable_precolor = "Lavender";
Color of the destination cell
var dragedtable_endcolor = "#FFCCFF";
var dragedtable_moveddiv = "Dragedtable_moveddiv";
var Dragedtable_tableid = "";
/*--------global variable-----------* *
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;
}
Get the absolute position of the control
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;
}
Show Layers
function Showdiv ()
{
var obj = event.srcelement;
var pos = new Array ();
Get an over layer
var odiv = document.all (Dragedtable_moveddiv);
if (obj.tagName.toLowerCase () = = "TD")
{
Obj.style.cursor = "Hand";
pos = GetPos (obj);
Calculate intermediate over layer position, assign value
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;
Remember the original 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]);
Calculates whether the mouse position is within the range of a cell
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")
{
Exchanging text
dragedtable_precell.innerhtml = otable.cells[i].innerhtml;
otable.cells[i].innerhtml = document.all (dragedtable_moveddiv). InnerHTML;
Clear the style of the original cell and the destination cell
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;
Clear hint Layer
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 End *******************************/
/************************************ Dragedtabledata.js End *******************************/
</script>
<script language= "JavaScript" >
function init ()
{
Register to drag and drop a table
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= "" > Drag swap cell contents </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>
