chinaRen首页上可以拖动的表格是如何实现的？

Question

web2.0。js的，你打开网页源码就看到了。

Answer 1

太长要分开贴
<!--#include file="powertable.js"-->
最后在需要排序的表格中写上加上"ID='PowerTable'"就行.
如:
<talbe border=0 width="100%" id="PowerTable">
<tr><td>name</td><td>age</td><td>sex</td><td>date</td><td>telephone</td></tr>
<tr><td>david</td><td>20</td><td>F</td><td>2004-10-3</td><td>5666</td></tr>
<tr><td>anna</td><td>21</td><td>M</td><td>2004-10-13</td><td>566</td></tr>
<tr><td>beverly</td><td>23</td><td>F</td><td>2004-12-23</td><td>5666</td></tr>
<tr><td>crytal</td><td>23</td><td>M</td><td>2004-11-10</td><td>66</td></tr>
<tr><td>yk</td><td>24</td><td>F</td><td>2004-12-13</td><td>566</td></tr>
</table>

Answer 2

记得PowerTable是分大小写的.POWERTABLE.JS的文件代码如下:<script language="JavaScript1.2">
/*
 This following code are designed and writen by Windy_sk <[email protected]>
 You can use it freely, but u must held all the copyright items!
*/var Main_Tab    = null;
var cur_row    = null;
var cur_col    = null;
var cur_cell    = null;
var Org_con    = "";
var sort_col    = null;var show_col    = false;
var charMode    = true;
var act_bgc    = "#BEC5DE";
var act_fc    = "black";
var cur_bgc    = "#ccffcc";
var cur_fc    = "black";function init(){
    cur_row            = null;
    cur_col            = null;
    cur_cell        = null;
    sort_col        = null;
    Main_Tab         = PowerTable;
    read_def(Main_Tab)
    Main_Tab.onmouseover    = overIt;
    Main_Tab.onmouseout    = outIt;
    Main_Tab.onclick    = clickIt;
    //Main_Tab.ondblclick    = dblclickIt;
    Org_con            = Main_Tab.outerHTML;
    
    arrowUp = document.createElement("SPAN");
    arrowUp.innerHTML    = "5";
    arrowUp.style.cssText     = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";    arrowDown = document.createElement("SPAN");
    arrowDown.innerHTML    = "6";
    arrowDown.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";
}function window.onload(){
    init();
    
    drag = document.createElement("DIV");
    drag.innerHTML        = "";
    drag.style.textAlign     = "center";
    drag.style.position     = "absolute";
    drag.style.cursor     = "hand";
    drag.style.border     = "1 solid black";
    drag.style.display     = "none";
    drag.style.zIndex     = "999";
    
    document.body.insertBefore(drag);
    //setInterval("judge_move()",100);
    //setInterval("showContent.value=Main_Tab.innerHTML;monitor.value='cur_row: '+cur_row+'; cur_col: '+cur_col + '; sort_col: ' +sort_col",1000);
}function judge_move(){
    //move[0].disabled=(cur_row == null || cur_row<=1);
    //move[1].disabled=(cur_row == null || cur_row==Main_Tab.rows.length-1 || cur_row == 0);
    //move[2].disabled=(cur_col == null || cur_col==0);
    //move[3].disabled=(cur_col == null || cur_col==Main_Tab.rows[0].cells.length-1);
}document.onmouseup    = drag_end;function clear_color(){
    the_table=Main_Tab;
    if(cur_col!=null){
        for(i=0;i<the_table.rows.length;i++){
            with(the_table.rows[i].cells[cur_col]){
                style.backgroundColor=oBgc;
                style.color=oFc;
            }
        }
    }
    if(cur_row!=null){
        for(i=0;i<the_table.rows[cur_row].cells.length;i++){
            with(the_table.rows[cur_row].cells[i]){
                style.backgroundColor=oBgc;
                style.color=oFc;
            }
        }
    }
    if(cur_cell!=null){
        cur_cell.children[0].contentEditable = false;
        with(cur_cell.children[0].runtimeStyle){
            borderLeft=borderTop="";
            borderRight=borderBottom="";
            backgroundColor="";
            paddingLeft="";
            textAlign="";
        }
    }
}

Answer 3

function document.onclick(){
    window.status = "";
    clear_color();
    cur_row  = null;
    cur_col  = null;
    cur_cell = null;
}function read_def(the_table){
    for(var i=0;i<the_table.rows.length;i++){
        for(var j=0;j<the_table.rows[i].cells.length;j++){
            with(the_table.rows[i]){
                cells[j].oBgc = cells[j].currentStyle.backgroundColor;
                cells[j].oFc  = cells[j].currentStyle.color;
                if(i==0){
                    //cells[j].onmousedown    = drag_start;
                    //cells[j].onmouseup    = drag_end;
                }
            }
        }
    }
}function get_Element(the_ele,the_tag){
    the_tag = the_tag.toLowerCase();
    if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
    while(the_ele=the_ele.offsetParent){
        if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
    }
    return(null);
}var dragStart        = false;
var dragColStart    = null;
var dragColEnd        = null;function drag_start(){
    var the_td    = get_Element(event.srcElement,"td");
    if(the_td==null) return;
    dragStart    = true;
    dragColStart    = the_td.cellIndex;
    drag.style.width    = the_td.offsetWidth;
    drag.style.height    = the_td.offsetHeight;
    function document.onmousemove(){
        drag.style.display    = "";
        drag.style.top        = event.y - drag.offsetHeight/2;
        drag.style.left        = event.x - drag.offsetWidth/2;
        for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
            with(Main_Tab.rows[0].cells[i]){
                if((event.y>offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<offsetTop+offsetHeight+parseInt(document.body.currentStyle.marginTop)) && (event.x>offsetLeft+parseInt(document.body.currentStyle.marginLeft) && event.x<offsetLeft+offsetWidth+parseInt(document.body.currentStyle.marginLeft))){
                    runtimeStyle.backgroundColor=act_bgc;
                    dragColEnd=cellIndex;
                }else{
                    runtimeStyle.backgroundColor="";
                }
            }
        }
        if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0].offsetHeight+parseInt(document.body.currentStyle.marginTop))) dragColEnd=null;
    }
    drag.innerHTML = the_td.innerHTML;
    drag.style.backgroundColor = the_td.oBgc;
    drag.style.color = the_td.oFc;
}function drag_end(){
    dragStart = false;
    drag.style.display="none";
    drag.innerHTML = "";
    drag.style.width = 0;
    drag.style.height = 0;
    for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
        Main_Tab.rows[0].cells[i].runtimeStyle.backgroundColor="";
    }
    if(dragColStart!=null && dragColEnd!=null && dragColStart!=dragColEnd){
        change_col(Main_Tab,dragColStart,dragColEnd);
        if(dragColStart==sort_col)sort_col=dragColEnd;
        else if(dragColEnd==sort_col)sort_col=dragColStart;
        document.onclick();
    }
    dragColStart = null;
    dragColEnd = null;
    document.onmousemove=null;
}

Answer 4

不行呀，snake1220() 
帮帮忙吧