表格中的行拖动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>拖动</TITLE>
<STYLE>
td{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 type="text/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 = obj.parentElement;
      //alert(obj.tagName);
      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 = "<table><tr>"+obj.innerHTML+"</tr></table>";
      //alert(oDiv.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.rows.length; i++)
     {
      if(oTable.rows[i].tagName.toLowerCase() == "tr")
      {
       pos = getPos(oTable.rows[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.rows[i] != dragedTable_preCell)
        oTable.rows[i].style.backgroundColor = dragedTable_endColor;
       }
       else
       {
        if(oTable.rows[i] != dragedTable_preCell)
         oTable.rows[i].style.backgroundColor = dragedTable_normalColor;
       }
      }
     }
    }
   }

   document.onmouseup = function()
   {
    hideDiv();
    var oTable = document.all(dragedTable_tableId);
    for(var i=0; i<oTable.rows.length; i++)
    oTable.rows[i].style.backgroundColor = dragedTable_normalColor;
   }

   document.onmousemove = function()
   {
    dragDiv();
   }

/************************************ dragedTableData.js 结束 *******************************/
/************************************ dragedTableData.js 结束 *******************************/
</script>
<script type="text/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 height="20px">
<TH colspan="4" style="">拖动交换单元格内容</TH>
</TR>
<TR height="20px">
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR height="20px">
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
<TR height="30px">
<TD>PhotoShop</TD>
<TD>Java</TD>
<TD>Illustrator</TD>
<TD>PageMaker</TD>
</TR>
<TR height="30px">
<TD>Cartoon</TD>
<TD>Telephone</TD>
<TD>China</TD>
<TD>USA</TD>
</TR>
<TR height="30px">
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR height="30px">
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
<TR height="30px">
<TD>PhotoShop</TD>
<TD>Flash</TD>
<TD>Illustrator</TD>
<TD>PageMaker</TD>
</TR>
<TR height="30px">
<TD>Cartoon</TD>
<TD>Telephone</TD>
<TD>China</TD>
<TD>USA</TD>
</TR>
</TABLE>
</BODY>
</HTML>