请问这段 js 代码怎么写？在线等。急！

<html>
<head>
<script language=javascript>
var v;
function starwu1(i) {
v = i.innerHTML;
}
function starwu2(i) {
i.innerHTML = v;
}
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
   <td id="td1" onMouseUp="starwu2(this)"> 内容一　</td>
</tr>
<tr>
   <td id="td2" onMouseUp="starwu2(this)"> 内容二 </td>
</tr>
<tr>
   <td id="td3" onMouseDown="starwu1(this)"> 内容三 </td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    参考:
    <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
    }
    </STYLE>
    <SCRIPT language="javascript">/*
     * created by LxcJie 2005.04.12
     * 可以实现表格内容的内部拖动
     * 确保中间过度层的存在，id为tempDiv
     * 在table的onMouseDown事件中引入showDiv()
     */
     
    /*--------全局变量-----------*/
    var x0,y0,x1,y1;
    var movable = false;
    var preCell = null;
    var normalColor = null;
    var preColor = "lavender";
    var endColor = "#FFCCFF";
    /*--------全局变量-----------*///得到控件的绝对位置
    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.tempDiv;
    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 = "";
    x0 = pos[1];
    y0 = pos[0];
    x1 = event.clientX;
    y1 = event.clientY;
    //记住原td
    normalColor = obj.style.backgroundColor;
    obj.style.backgroundColor = preColor;
    preCell = obj;

    movable = true;
    }
    }
    function dragDiv()
    {
    if(movable)
    {
    var oDiv = document.all.tempDiv;
    var pos = new Array();
    oDiv.style.top = event.clientY - y1 + y0;
    oDiv.style.left = event.clientX - x1 + x0;
    var oTable = document.all.table1;
    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] != preCell)
    oTable.cells[i].style.backgroundColor = endColor;
    }
    else
    {
    if(oTable.cells[i] != preCell)
    oTable.cells[i].style.backgroundColor = normalColor;
    }
    }
    }
    }
    }function hideDiv()
    {
    if(movable)
    {
    var oTable = document.all.table1;
    var pos = new Array();
    if(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")
    {
    //交换文本
    preCell.innerHTML = oTable.cells[i].innerHTML;
    oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
    //清除原单元格和目标单元格的样式
    preCell.style.backgroundColor = normalColor;
    oTable.cells[i].style.backgroundColor = normalColor;
    oTable.cells[i].style.cursor = "";
    preCell.style.cursor = "";
    preCell.style.backgroundColor = normalColor;
    }
    }
    }
    }
    movable = false;
    //清除提示图层
    document.all.tempDiv.style.display = "none";
    }
    }document.onmouseup = function()
    {
    hideDiv();
    var oTable = document.all.table1;
    for(var i=0; i<oTable.cells.length; i++)
    oTable.cells[i].style.backgroundColor = normalColor;
    }document.onmousemove = function()
    {
    dragDiv();
    }
    </SCRIPT>
    </HEAD><BODY oncontextmenu="return false;">
    <TABLE style="border:1px solid black;font-size:13px" id="table1" onMouseDown="showDiv()" 
           onselectstart="return false;" width="70%" align="center" cellpadding="0" 
       cellspacing="0" bordercolor="#FFCCFF" bgcolor="#FFFFFF">
      <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>
    <DIV id="tempDiv" onselectstart="return false" style="cursor:hand;position:absolute; 
         border:1px solid black; background-color:#FFCCFF; display:none">
    </DIV>
    </BODY>
    </HTML>
      

  2.   

    tr不可以，td才行！
    我的代码不是可以拖动的吗？
      

  3.   

    还是 ice_berg16(寻梦的稻草人) ( ) 那段代码，
    你把单元格做成一个一个不就是你说的那个了吗，如下==================================<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
    }
    </STYLE>
    <SCRIPT language="javascript">/*
     * created by LxcJie 2005.04.12
     * 可以实现表格内容的内部拖动
     * 确保中间过度层的存在，id为tempDiv
     * 在table的onMouseDown事件中引入showDiv()
     */
     
    /*--------全局变量-----------*/
    var x0,y0,x1,y1;
    var movable = false;
    var preCell = null;
    var normalColor = null;
    var preColor = "lavender";
    var endColor = "#FFCCFF";
    /*--------全局变量-----------*///得到控件的绝对位置
    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.tempDiv;
    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 = "";
    x0 = pos[1];
    y0 = pos[0];
    x1 = event.clientX;
    y1 = event.clientY;
    //记住原td
    normalColor = obj.style.backgroundColor;
    obj.style.backgroundColor = preColor;
    preCell = obj;

    movable = true;
    }
    }
    function dragDiv()
    {
    if(movable)
    {
    var oDiv = document.all.tempDiv;
    var pos = new Array();
    oDiv.style.top = event.clientY - y1 + y0;
    oDiv.style.left = event.clientX - x1 + x0;
    var oTable = document.all.table1;
    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] != preCell)
    oTable.cells[i].style.backgroundColor = endColor;
    }
    else
    {
    if(oTable.cells[i] != preCell)
    oTable.cells[i].style.backgroundColor = normalColor;
    }
    }
    }
    }
    }function hideDiv()
    {
    if(movable)
    {
    var oTable = document.all.table1;
    var pos = new Array();
    if(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")
    {
    //交换文本
    preCell.innerHTML = oTable.cells[i].innerHTML;
    oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
    //清除原单元格和目标单元格的样式
    preCell.style.backgroundColor = normalColor;
    oTable.cells[i].style.backgroundColor = normalColor;
    oTable.cells[i].style.cursor = "";
    preCell.style.cursor = "";
    preCell.style.backgroundColor = normalColor;
    }
    }
    }
    }
    movable = false;
    //清除提示图层
    document.all.tempDiv.style.display = "none";
    }
    }document.onmouseup = function()
    {
    hideDiv();
    var oTable = document.all.table1;
    for(var i=0; i<oTable.cells.length; i++)
    oTable.cells[i].style.backgroundColor = normalColor;
    }document.onmousemove = function()
    {
    dragDiv();
    }
    </SCRIPT>
    </HEAD><BODY oncontextmenu="return false;">
    <TABLE style="border:1px solid black;font-size:13px" id="table1" onMouseDown="showDiv()" 
           onselectstart="return false;" width="70%" align="center" cellpadding="0" 
       cellspacing="0" bordercolor="#FFCCFF" bgcolor="#FFFFFF">
      <TR>
        <TH>拖动交换单元格内容</TH>
      </TR>  
      <TR>
        <TD>内容一</TD>
      </TR>
      <TR>
        <TD>内容二</TD>
      </TR>
      <TR>
        <TD>内容三</TD>
      </TR>
    </TABLE>
    <DIV id="tempDiv" onselectstart="return false" style="cursor:hand;position:absolute; 
         border:1px solid black; background-color:#FFCCFF; display:none">
    </DIV>
    </BODY>
    </HTML>
      

  4.   

    我就说出我想实现的效果吧：    首先我利用ASP将数据库中的数据读取到页面，现在我允许用户将显示出来的数据利用拖动鼠标的方式进行顺序的调整（拖动后我将重新调整数据库的数据排序[这点我来做就行了哈 ^_^] ）    于是就有以下问题：    拖动（释放鼠标）时怎样触发我要执行的相应用程序？在拖动位置的时候我怎样来确定用户拖到的位置？