一个用JS实现列拖拽的问题

没写过，自己写要想通用，估计难点，建议楼主用ext框架吧。
http://extjs.com/deploy/dev/examples/grid/array-grid.html

解决方案 »

  1.   

    table的列？
    这个不行吧
    除非用div来做
      

  2.   

    JKDrag里有table行列拖动的演示：
    JKHtml\JKDrag\JKDragRowColumn.htmJKHtml(20080129) 
    http://download.csdn.net/source/346399 
    内含：  
    JKDrag演示(包括：block对象拖动，inline对象拖动，Table行拖动，Table列拖动)   
      

  3.   

    去51JS看下 那里这种作品很多
    http://bbs.51js.com
      

  4.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <style>
    .tableHeaderCell
    {
    background-color:#cccccc;
    }
    </style>
    <script language="javascript" src="JKDrag.js"></script>
    <script defer="true" >
    document.onmousemove=jkDrag_mousemove; 
    document.onmouseup=jkDrag_mouseup;  
    </script>
    </head><body >
    <H3>JKDrag：给既有table加上行列拖动功能</H3>
    <div style="font-size:10pt;">
    注：另有：<a href="JKDrag.htm">JKDrag主要功能演示</a> 
    <br/> <br/>                       注：本页面仅在IE6/FireFox2.0下测试过。其它浏览器或其它版本未经测试。<br/>    
    注-----：作者JK：<a href="mailTo:[email protected]?subject=About%20JKDrag">[email protected]</a><br/>    
    <hr/>
    </div>
    <hr/>
    "display=block" 对象拖动：
    <table border="1" width="100%" id="tableSample1" >
     <tr>
      <td>&nbsp;</td>
      <td class=tableHeaderCell >列1</td>
      <td class=tableHeaderCell >列2</td>
      <td class=tableHeaderCell >列3</td>
      <td class=tableHeaderCell >列4</td>
      <td class=tableHeaderCell >列5</td>
     </tr>
     <tr >
      <td class=tableHeaderCell >行1</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
     </tr>
     <tr >
      <td class=tableHeaderCell >行2<input type=checkbox value=1 title="IE6.0.2900下移动行后导致checkbox/radiobox的值清空，可能是ie的bug。如有碰到，请自己想法绕过"></td>
      <td>21<input ></td>
      <td>22<select ><option/><option value=1>1</option></td>
      <td>23<input type=checkbox  ></td>
      <td>24<input type=radio name=radiotest><input type=radio name=radiotest></td>
      <td>25</td>
     </tr>
     <tr >
      <td class=tableHeaderCell >行3</td>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td>35</td>
     </tr>
     <tr >
      <td class=tableHeaderCell >行4</td>
      <td>41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
      <td>45</td>
     </tr>
     <tr >
      <td class=tableHeaderCell >行5</td>
      <td>51</td>
      <td>52</td>
      <td>53</td>
      <td>54</td>
      <td>55</td>
     </tr>
    </table><hr/>
    <input type=button value="add header drag to table." onclick="addDragHeaderToTable('tableSample1');this.disabled=true;alert('Ok.')">
    </body>
    </html>
    <script>
    function addDragHeaderToTable(tableId){
     var table=document.getElementById(tableId);
     var dragTrObjs=new Array();
     var dragTdObjs=new Array();
     var rows=table.rows;
     for(var i=1;i<rows.length;i++) {
      dragTrObjs.push(rows[i]);
      rows[i].setAttribute("jkDragGroup","rowDrag");
      rows[i].cells[0].onmousedown=function (event){jkDrag_mousedown(event,this,"rowDrag");}
     }
     var cells=rows[0].cells;
     for(var i=1;i<cells.length;i++){
      dragTdObjs.push(cells[i]);
      cells[i].setAttribute("jkDragGroup","columnDrag");
      cells[i].onmousedown=function (event){jkDrag_mousedown(event,this,"columnDrag");}
     }
     var rowDrag=new jkDrag_DragGroup("rowDrag",dragTrObjs,"block");
     var inlineDrag=new jkDrag_DragGroup("columnDrag",dragTdObjs,"inline",columnDragBeginFun,columnDragEndFun);
    }function columnDragBeginFun()
    {
      jkDrag_cloneNodeDiv.style.height=jkDrag_dragObj.offsetParent.offsetHeight;
      jkDrag_highlightDiv.style.height=jkDrag_dragObj.offsetParent.offsetHeight;
    }function columnDragEndFun()
    {
     var rows=jkDrag_dragObj.offsetParent.rows;
     if(jkDrag_mouseInObj==jkDrag_dragObj) return;
     var cellIndex=jkDrag_dragObj.cellIndex;
     if(jkDrag_referenceObj){
      var newCellIndex=jkDrag_referenceObj.cellIndex;
      if(newCellIndex==null) newCellIndex=jkDrag_dragObj.previousSibling.cellIndex+1;//For Firefox: there may be a textNode between td object.
      for(var i=0;i<rows.length;i++){
       rows[i].insertBefore(rows[i].cells[cellIndex],rows[i].cells[newCellIndex]);
      }
     }
     else{
      for(var i=0;i<rows.length;i++){
       rows[i].appendChild(rows[i].cells[cellIndex]);
      }
     }
    }</script>