实现功能：

  1. 在Table上实现行的拖动。支持预览
  2. 忽略THEAD/TFoot的行

支持的两个函数

if(window.scrollTop==null)

{

    window.scrollTop=function()

    {

        return window.document.body.scrollTop || window.document.documentElement.scrollTop;

    }

}

if(null==window.scrollLeft)

{

    window.scrollLeft=function()

    {

        return window.document.body.scrollLeft || window.document.documentElement.scrollLeft;

    }

}

主要功能函数

if(null==window.XTable)

{

    window.XTable={};

    window.XTable.DragDrop={};

    window.XTable.DragDrop.tempRow=null;

    window.XTable.DragDrop.isProcessing=false;

    window.XTable.DragDrop.bgColorInitRow=null;

    window.XTable.DragDrop.bgColorOverRow=null;

    window.XTable.DragDrop.rowOver=null;

    window.XTable.DragDrop.divStyle="color:white;"+

        "background-color:#6E7B8B;"+

        "position:absolute;"+

        "z-index:9000;"+

        "border:solid 2px #68228B;"+

        "width:300px;"+

        "padding:2px;";

    window.XTable.DragDrop.tdStyle="color:#98FB98;"+

        "white-space:nowrap;"+

        "border:solid 1px #6C7B8B;"+

        "padding-left:5px;"+

        "padding-right:3px;";

    window.XTable.DragDrop.overColor="#708090";

    window.XTable.DragDrop.maskColor="#CDBA96";

    window.XTable.rowDragDropMouseDown=function(tr)

    {

        if(null==tr||tr.parentElement==null||tr.parentElement.tagName!="TBODY")

        {

            return;

        }

        window.XTable.DragDrop.bgColorInitRow=tr.style.backgroundColor;

        tr.style.backgroundColor=window.XTable.DragDrop.maskColor;

        if(null==window.XTable.DragDrop.tempRow)

        {

            window.XTable.DragDrop.tempRow=document.createElement("<div style='"+window.XTable.DragDrop.divStyle+"'>");

            document.body.appendChild(window.XTable.DragDrop.tempRow);            

            window.XTable.DragDrop.tempRow.appendChild(document.createTextNode("拖动到目标行的上面，本行将自动放在目标行前面"));

        }    

        while(window.XTable.DragDrop.tempRow.children &&window.XTable.DragDrop.tempRow.children.length>1)

        {

            window.XTable.DragDrop.tempRow.removeChild(window.XTable.DragDrop.tempRow.children[1]);

        }

        window.XTable.DragDrop.tempRow.style.display="block";

        window.XTable.DragDrop.tempRow.style.top=event.clientY+scrollTop();

        window.XTable.DragDrop.tempRow.style.left=event.clientX+scrollLeft()+10;

        $A(tr.children).each(function(td,idx)

        {

            var ntd=document.createElement("<span style='"+window.XTable.DragDrop.tdStyle+"'>");

            ntd.appendChild(document.createTextNode(td.innerText));

            window.XTable.DragDrop.tempRow.appendChild(ntd)

        });

        window.XTable.DragDrop.isProcessing=true;

        tr.setCapture();

    }

    window.XTable.rowDragDropMouseMove=function(tr)

    {

        if(null!=window.XTable.DragDrop.rowOver)

        {

            window.XTable.DragDrop.rowOver.style.backgroundColor=window.XTable.DragDrop.bgColorOverRow;

            window.XTable.DragDrop.rowOver=null;

        }

        if(false==window.XTable.DragDrop.isProcessing)

        {

            return false;

        }

        window.XTable.DragDrop.tempRow.style.top=event.clientY+scrollTop();

        window.XTable.DragDrop.tempRow.style.left=event.clientX+scrollLeft()+10;

        var target=document.elementFromPoint(event.x,event.y);

        while( null != target && target.tagName!="TR" )

        {

            target = target.parentElement;

        }

        if(!target||null==target.parentElement||target.parentElement.tagName!="TBODY")

        {

            return;

        }

        window.XTable.DragDrop.bgColorOverRow=target.style.backgroundColor;

        window.XTable.DragDrop.rowOver=target;

        target.style.backgroundColor=window.XTable.DragDrop.overColor;

    }

    window.XTable.rowDragDropMouseUp=function(tr)

    {

        tr.releaseCapture();

        tr.style.backgroundColor=window.XTable.DragDrop.bgColorInitRow;

        if(null!=window.XTable.DragDrop.rowOver)

        {

            window.XTable.DragDrop.rowOver.style.backgroundColor=window.XTable.DragDrop.bgColorOverRow;

            window.XTable.DragDrop.rowOver=null;

        }

        if(null!=window.XTable.DragDrop.tempRow)

        {

            window.XTable.DragDrop.tempRow.style.display="none";

        }

        if(!window.XTable.DragDrop.isProcessing)

        {

            return false;

        }

        window.XTable.DragDrop.isProcessing=false;

        var target=document.elementFromPoint(event.x,event.y);

        while( null != target && target.tagName!="TR" )

        {

            target = target.parentElement;

        }

        if(!target||null==target.parentElement||target.parentElement.tagName!="TBODY")

        {

            return;

        }

        target.insertAdjacentElement("BeforeBegin",tr);

    }

    window.XTable.makeDragDrop=function(tablename)

    {

        var table=$(tablename);

        if(null==table)

        {

            return;

        }

        if(!table.tBodies||table.tBodies.length<1)

        {

            return;

        }

        $A(table.tBodies[0].rows).each(function(tr,n)

        {

            (function(tr)

            {

                tr.onmousedown=function()

                {

                    window.XTable.rowDragDropMouseDown(tr);

                }

                tr.onmousemove=function()

                {

                    window.XTable.rowDragDropMouseMove(tr);

                }

                tr.onmouseup=function()

                {

                    window.XTable.rowDragDropMouseUp(tr);

                }

            }

            )(tr);

        });

    }

}

测试的脚本如下

<div style="width:200px;float:left">AAA</div>

<div style="">

    <TABLE WIDTH="800" BORDER="1" ID="AAAAAA" >

    <THead>

         <TR><TD>Header0</TD><TD>Header1</TD><TD>Header2</TD></TR>

    </THead>

    <tbody>

     <TR style="background-color:"><TD>ROW_0</TD><TD>ROW_0_CELL_1</TD><TD>ROW_0_CELL2_1</TD></TR>

     <TR style="background-color:black;color:white"><TD>ROW_1</TD><TD>ROW_1_CELL_2</TD><TD>ROW_1_CELL2_2</TD></TR>

     <TR style="background-color:white"><TD>ROW_2</TD><TD>ROW_2_CELL_3</TD><TD>ROW_2_CELL2_3</TD></TR>

     <TR style="background-color:menu"><TD>ROW_3</TD><TD>ROW_3_CELL_4</TD><TD>ROW_3_CELL2_4</TD></TR>

     <TR style="background-color:yellow"><TD>ROW_4</TD><TD>ROW_4_CELL_5</TD><TD>ROW_4_CELL2_5</TD></TR>

     <TR style="background-color:green"><TD>ROW_5</TD><TD>ROW_5_CELL_6</TD><TD>ROW_5_CELL2_6</TD></TR>

     <TR style="background-color:blue"><TD>ROW_6</TD><TD>ROW_6_CELL_7</TD><TD>ROW_6_CELL2_7</TD></TR>

     <TR style="background-color:red"><TD>ROW_7</TD><TD>ROW_7_CELL_8</TD><TD>ROW_7_CELL2_8</TD></TR>

    </tbody>

    <TFOOT>

         <TR><TD>Footer</TD><TD>Footer</TD><TD>Footer</TD></TR>

    </TFOOT>

    </TABLE>

</div>

<script type="text/javascript" defer>

    window.XTable.makeDragDrop("AAAAAA");

</script>