求实现拖动表格的js代码

怎么总有人问
http://community.csdn.net/Expert/topic/4239/4239286.xml?temp=.9276239

解决方案 »

  1.   

    感谢JK_10000(JK) 但我想只要一移动表格，表格位置一有变化就会把所有表格的位置作为参数传递过去，应该如何实现？我给每个表格加了id，分别为id=1,2,3...
    我想能这样传递参数 1_2_3:2_3_2:3_1_1:...
    表示id=1的表格在第二行第三列:id=2的表格在第三行第二列:...应该在函数中如何获取？
    我对js的应用不熟，希望JK_10000能再出援手，我打算与php结合起来做一个应用，谢谢！ <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <style>
    .removableObj
    {
    height:25;
    position:relative;
    left: 1px;
    }
    </style>
    <script language="javascript">
    var beginMoving=false;
    var sourceObj=null;
    var objectObj=null;
    var objectObj2=null;
    function MouseDownToMove(obj){
    obj.style.zIndex=1;
    obj.mouseDownY=event.clientY;
    obj.mouseDownX=event.clientX;
    beginMoving=true;
    obj.setCapture();
    sourceObj=obj;
    objectObj=null;
    }function MouseMoveToMove(obj){
        if(!beginMoving) return false;
    obj.style.top = (event.clientY-obj.mouseDownY);
    obj.style.left = (event.clientX-obj.mouseDownX);
    }
    function MouseUpToMove(obj){
    if(!beginMoving) return false;
    obj.releaseCapture();
    obj.style.top=0;
    obj.style.left=0;
    obj.style.zIndex=0;
    beginMoving=false;
    window.setTimeout("swapFun()",20);
    }function MouseOverFun(obj)
    {
    if(obj==sourceObj) return false;
    objectObj=obj;
    }function MouseOverFun2(obj)
    {
    objectObj2=obj;
    }function swapFun()
    {
    if(sourceObj!=null && objectObj!=null) objectObj.insertAdjacentElement("beforeBegin",sourceObj);
    else if(sourceObj!=null && objectObj2!=null) objectObj2.insertAdjacentElement("beforeEnd",sourceObj);
    sourceObj=null;
    objectObj=null;
    objectObj2=null;
    }
    </script>
    </head><body><table border="1" width="100%" height="58">
      <tr>
        <td width="34%" valign="top" height="46" onmouseover="MouseOverFun2(this);" >
          <table border="1" width="100%" bgcolor="#99CCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="1">
            <tr>
              <td width="23%">和</td>
              <td width="21%">飞过海</td>
            </tr>
            <tr>
              <td width="23%">　</td>
              <td width="21%">　</td>
            </tr>
          </table><table border="1" width="100%" bgcolor="#FFCCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="2">
            <tr>
              <td width="21%">还是</td>
              <td width="35%">护身符哈</td>
            </tr>
            <tr>
              <td width="21%">，</td>
              <td width="35%">和是是护</td>
            </tr>
          </table>
      <table border="1" width="100%" bgcolor="#00CC99" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="3">
            <tr>
              <td width="21%">还是</td>
              <td width="9%">　</td>
              <td width="35%">呵呵</td>
            </tr>
            <tr>
              <td width="21%">，</td>
              <td width="9%">　</td>
              <td width="35%">和</td>
            </tr>
          </table>
          
        </td>
        <td width="32%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
      <table border="1" width="100%" bgcolor="#FF0000" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="4">
            <tr>
              <td width="21%">还是</td>
            </tr>
            <tr>
              <td width="21%">，</td>
            </tr>
          </table>    
          <table border="1" width="100%" bgcolor="#00FFFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="5">
            <tr>
              <td width="21%">还是</td>
              <td width="35%">护身符哈</td>
              <td width="21%">　</td>
              <td width="23%">呵呵</td>
            </tr>
            <tr>
              <td width="21%">，</td>
              <td width="35%">和是是护</td>
              <td width="21%">　</td>
              <td width="23%">和</td>
            </tr>
          </table></td>
        <td width="34%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
      <table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="6">
            <tr>
              <td width="21%">还是</td>
              <td width="35%">护身符哈</td>
              <td width="21%">　</td>
              <td width="23%">呵呵</td>
            </tr>
            <tr>
              <td width="21%">，</td>
              <td width="35%">和是是护</td>
              <td width="21%">　</td>
              <td width="23%">和</td>
            </tr>
          </table>    
          <table width="100%" border="1" bgcolor="#FFFFCC" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="7">
            <tr>
              <td width="87">&nbsp;输多发</td>
              <td width="115">嘎撒递归</td>
            </tr>
            <tr>
              <td width="87">嘎大嘎</td>
              <td width="115">大幅度</td>
            </tr>
            <tr>
              <td width="87">过大撒</td>
              <td width="115">嘎</td>
            </tr>
          </table></td>
      </tr>
    </table>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <style>
    .removableObj
    {
    height:25;
    position:relative;
    left: 1px;
    }
    </style>
    <script language="javascript">
    var beginMoving=false;
    var sourceObj=null;
    var objectObj=null;
    var objectObj2=null;
    function MouseDownToMove(obj){
    obj.style.zIndex=1;
    obj.mouseDownY=event.clientY;
    obj.mouseDownX=event.clientX;
    beginMoving=true;
    obj.setCapture();
    sourceObj=obj;
    objectObj=null;
    }function MouseMoveToMove(obj){
        if(!beginMoving) return false;
    obj.style.top = (event.clientY-obj.mouseDownY);
    obj.style.left = (event.clientX-obj.mouseDownX);
    }
    function MouseUpToMove(obj){
    if(!beginMoving) return false;
    obj.releaseCapture();
    obj.style.top=0;
    obj.style.left=0;
    obj.style.zIndex=0;
    beginMoving=false;
    window.setTimeout("swapFun()",20);
    }function MouseOverFun(obj)
    {
    if(obj==sourceObj) return false;
    objectObj=obj;
    }function MouseOverFun2(obj)
    {
    objectObj2=obj;
    }function swapFun()
    {
    if(sourceObj!=null && objectObj!=null) objectObj.insertAdjacentElement("beforeBegin",sourceObj);
    else if(sourceObj!=null && objectObj2!=null) objectObj2.insertAdjacentElement("beforeEnd",sourceObj);
    sourceObj=null;
    objectObj=null;
    objectObj2=null;
    }
    </script>
    </head><body><table border="1" width="100%" height="58">
      <tr>
        <td width="34%" valign="top" height="46" onmouseover="MouseOverFun2(this);" >
        <input name="tableName" title="实用时把它隐藏就是" value="空间-------1">
          <table border="1" width="100%" bgcolor="#99CCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="1">
            <tr>
              <td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格1">表格1</td>
              <td >其它内容</td>
            </tr>
          </table><table border="1" width="100%" bgcolor="#FFCCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="2">
            <tr>
              <td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格2">表格2</td>
              <td >其它内容</td>
            </tr>
          </table>
      <table border="1" width="100%" bgcolor="#00CC99" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="3">
            <tr>
              <td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格3">表格3</td>
              <td >其它内容</td>
            </tr>
          </table>
          
        </td>
        <td width="32%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
        <input name="tableName" title="实用时把它隐藏就是" value="空间-------2">
      <table border="1" width="100%" bgcolor="#FF0000" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="4">
            <tr>
              <td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格4">表格4</td>
              <td >其它内容</td>
            </tr>
          </table>    
          <table border="1" width="100%" bgcolor="#00FFFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="5">
            <tr>
              <td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格5">表格5</td>
              <td >其它内容</td>
            </tr>
          </table></td>
        <td width="34%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
        <input name="tableName" title="实用时把它隐藏就是" value="空间-------3">
      <table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="6">
            <tr>
              <td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格6">表格6</td>
              <td >其它内容</td>
            </tr>
          </table>    
          <table width="100%" border="1" bgcolor="#FFFFCC" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"  id="7">
            <tr>
              <td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格7">表格7</td>
              <td >其它内容</td>
            </tr>
          </table></td>
      </tr>
    </table><input type=button value="保存示例" onclick="saveFun()">
    </body>
    </html>
    <script>
    function saveFun()
    {
    var tableNameObjs=document.getElementsByName("tableName");
    var tempStr="";
    for(var i=0;i<tableNameObjs.length;i++)
    {
    tempStr += "\n"+tableNameObjs[i].value;
    }
    alert(tempStr);}
    </script>
      

  3.   

    这个代码有一个缺陷，就是当只要在每个table的任务位置单击的话就会移动表格位置，若这个表格中我放入一些链接的话，那么当点这些链接的话，除了打开链接指向的网页外，还会移动表格，这个应该如何解决呢？
      

  4.   

    onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);"这些触发事件都在table里面，如果对表格内任何部位操作都会触发事件，但如果把这些事件移到<tr>或<td>又不能实现表格整体拖动
    我试过不同方法但问题依旧
      

  5.   

    我试了n遍还是没解决，麻烦JK再帮一次忙
      

  6.   

    window.setTimeout("swapFun()",20);--->>>
    if(Math.abs(event.clientY-obj.mouseDownY)>5 || Math.abs(event.clientX-obj.mouseDownX)>5)
      window.setTimeout("swapFun()",20);
      

  7.   

    非常感JK，很快我就会完成类似gmail个人主页的程序，到时会公布出来