表格列的拖动

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
     < HEAD >
         < title > DataGrid拖动的例子 </ title >
         < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio 7.0" >
         < META  http-equiv ="Content-Type"  content ="text/html; charset=gb2313" >
         < meta  name ="CODE_LANGUAGE"  Content ="VB" >
         < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
         < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
     </ HEAD >
     < body >
         
         < form  name ="idbSample"  method ="post"  action ="DropDataGrid.aspx"  id ="idbSample"  class ="SubHeading" >
             < table  cellspacing ="0"  cellpadding ="3"  rules ="all"  dragcolor ="gray"  slcolor ="#ffffcc"  hlcolor ="#BEC5DE"
                bordercolor ="#000099"  border ="1"  id ="MyTable"  style ="border-color:#000099;width:100%;border-collapse:collapse;BEHAVIOR:url(tableAct.htc)" >
                 < tr  align ="Center"  style ="background-color:#FFCC66;font-weight:bold;" >
                     < td  Width ="200" > Email </ td >
                     < td  Width ="200" > FirstName </ td >
                     < td  Width ="200" > LastName </ td >
                     < td  Width ="200" > Manager </ td >
                 </ tr >
                  < tr >
                     < td > mm@mmm.mm </ td >
                     < td > Lover </ td >
                     < td > Net </ td >
                     < td > 0 </ td >
                 </ tr >
                 < tr >
                     < td > xxx@xxxx.xx </ td >
                     < td > NET开发者园地 </ td >
                     < td > Net </ td >
                     < td > 0 </ td >
                 </ tr >
                  < tr >
                     < td > hhh@hhh.hh </ td >
                     < td > XML开发者园地 </ td >
                     < td > Net </ td >
                     < td > 1 </ td >
                 </ tr >
                 < tr >
                     < td > youraddress@yourcompany.com </ td >
                     < td > 宪会 </ td >
                     < td > 孟 </ td >
                     < td > 1 </ td >
                 </ tr >
                 < tr >
                     < td > myaddress@mycompany.com </ td >
                     < td > E章 </ td >
                     < td > 孟子 </ td >
                     < td > 0 </ td >
                 </ tr >   
             </ table >
         </ form >
     </ body >
</ HTML >

mytable.htc：

 

< public:event name = " onrowselect "  ID = rowSelect  />
< public:property name = " hlColor "   />
< public:property name = " slColor "   />
< public:property name = ' dragColor '   />

< PUBLIC:ATTACH EVENT = " ondetach "  ONEVENT = " cleanup() "   />
< public:attach     event = oncontentready onevent = " init(); "   />

< script language = jscript >
var  currRow  =   - 1 ;
var  selRow  =   - 1 ;

if  (element.tagName  ==   ' TABLE ' )
{
    element.attachEvent( ' onmouseover ' , onMouseOver);
    element.attachEvent( ' onmouseout ' , onMouseOut);
    element.attachEvent( ' onclick ' , onClick);
}
else
{
    alert( " 错误 " );
}

function  cleanup()
{ 
    hilite( - 1 );

    element.detachEvent( ' onmouseover ' , onMouseOver);
    element.detachEvent( ' onmouseout ' , onMouseOut);
    element.detachEvent( ' onclick ' , onClick);
}

function  onClick()
{  
    srcElem  =  window.event.srcElement;
     while  (srcElem.tagName  !=   " TR "   &&  srcElem.tagName  !=   " TABLE " )
        srcElem  =  srcElem.parentElement;

     if (srcElem.tagName  !=   " TR " )  return ;

     if (srcElem.rowIndex  ==   0  )  return ;

     if  (selRow  !=   - 1 ) selRow.runtimeStyle.backgroundColor  =   '' ;

    srcElem.runtimeStyle.backgroundColor  =  slColor;
    selRow  =  srcElem;

     var  oEvent      =  createEventObject();
    oEvent.selected  =  selRow;
    rowSelect.fire(oEvent);
}

// 找到所在的行，然后决定是否改变背景颜色
function  onMouseOver()
{ 
    srcElem  =  window.event.srcElement;
     // crawl up to find the row
     while  (srcElem.tagName  !=   " TR "   &&  srcElem.tagName  !=   " TABLE " )
        srcElem  =  srcElem.parentElement;

     if (srcElem.tagName  !=   " TR " )  return ;

     if  (srcElem.rowIndex  >   0 )
        hilite(srcElem);
     else
        hilite( - 1 );

}

function  onMouseOut()
{ 
    hilite( - 1 ,  - 1 );
}

function  hilite(newRow)
{ 
    
     if  (hlColor  !=   null  )
    {
         if  (currRow  !=   - 1   &&  currRow != selRow)
        {
            currRow.runtimeStyle.backgroundColor  =   '' ;
        }

         if  (newRow  !=   - 1   &&  newRow != selRow)
        {
            newRow.runtimeStyle.backgroundColor  =  hlColor;
        }
    }
    currRow  =  newRow;
}

var  tbody = null ;
var  theadrow = null ;
var  colCount  =   null ;


var  reverse  =   false ;
var  lastclick  =   - 1 ;

var  arrHitTest  =   new  Array();
var  bDragMode  =   false ;
var  objDragItem;
 
var  iArrayHit  =   false ;
var  rowCount   =   0  ;

function  init() {

    tbody  =  element.tBodies( 0 );
        
     if  ( ! tbody)  return ; 

      rowCount  =  tbody.children.length;
 
     var  l, clickCell;
     var  cx = 0 ;
     var  cy = 0 ;
     var  c;
  
     for  ( var  i = 0 ; i < rowCount; i ++ )
    {
     /*
        l=document.createElement("IMG");
        l.src="dude07232001blank.gif";
        l.id="srtImg";
        l.width=25;
        l.height=11;
*/
         // clickCell = theadrow.children[i];
         //  第一列中 单元格 
        clickCell  =  element.childNodes[ 0 ].childNodes[i].firstChild ;
        clickCell.runtimeStyle.cursor  =   " hand " ;
        clickCell.selectIndex  =  i;
//         clickCell.insertAdjacentElement("beforeEnd", l)
         // clickCell.attachEvent("onclick", doClick);

        arrHitTest[i]  =   new  Array();

        c  =  clickCell.offsetParent;

        if (cx  ==   0   &&  cy  ==   0  )
       {
             while  (c.offsetParent  !=   null ) {
                  cy  +=  c.offsetTop;
                  cx  +=  c.offsetLeft;
                  c  =  c.offsetParent;
        }
    }

// arrHitTest 一维 存储了行号
// 二维 存储了 x ,y ,单元格对象，单元格下边界
    arrHitTest[i][ 0 ]  =  cx  +  clickCell.offsetLeft;
    arrHitTest[i][ 1 ]  =  cy  +  clickCell.offsetTop;
    arrHitTest[i][ 2 ]  =  clickCell;
     // arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);
    arrHitTest[i][ 3 ]  =  cy  +  clickCell.offsetTop  +  eval(clickCell.height);
 
    clickCell.attachEvent( " onmousedown " ,onMouseDown);
    }

// 注释
  defaultTitleColor  =  tbody.childNodes[ 0 ].firstChild.currentStyle.backgroundColor;
    
  element.document.attachEvent( " onmousemove " ,onMouseMove);
  element.document.attachEvent( " onmouseup " ,onMouseUp);
  element.document.attachEvent( " onselectstart " ,onSelect);
}
  
  
function  InitHeader()
{
 
   var  cx = 0 ;
   var  cy = 0 ;
   var  c;

 
   for  (i = 0 ; i < colCount ; i ++ ) {

    alert(theadrow.tagName) ;

     var  clickCell  =  theadrow.children[i];
    clickCell.selectIndex  =  i;
    c  =  clickCell.offsetParent;

     if (cx  ==   0   &&  cy  ==   0  )
    {
         while  (c.offsetParent  !=   null ) {
                  cy  +=  c.offsetTop;
                  cx  +=  c.offsetLeft;
                  c  =  c.offsetParent;
        }
    }

    arrHitTest[i][ 0 ]  =  cx  +  clickCell.offsetLeft;
    arrHitTest[i][ 1 ]  =  cy  +  clickCell.offsetTop;
    arrHitTest[i][ 2 ]  =  clickCell;
    arrHitTest[i][ 3 ]  =  cx  +  clickCell.offsetLeft  +  eval(clickCell.width);
     
  }
}

 
function  onSelect()
{
     return   false ;
}

// 执行替换 变色的行就是要移动到的行。 切记！
function  ChangeHeader(iChange)
{ 
     for ( var  y  =   0 ; y  <  arrHitTest.length; y ++ )
    {
     if  (arrHitTest[y][ 2 ].currentStyle.backgroundColor  ==  dragColor)
        arrHitTest[y][ 2 ].style.backgroundColor  =  defaultTitleColor;
    }

     if (iChange  ==   " -1 " )  return ;

    arrHitTest[iChange][ 2 ].style.backgroundColor  =  dragColor;
}


// 替换的关键代码
function  onMouseUp(e)
{ 
     if ( ! bDragMode)     return ;
    bDragMode  =   false ;
    
     var  iSelected  =  objDragItem.selectIndex;
       
    objDragItem.removeNode( true );
    objDragItem  =   null ;

     ChangeHeader( - 1 );

     // iSelected确定了正确选择的行号 从零开始 
      if ( (iArrayHit  -   1 )  <   0   ||  iSelected  <   0 )  return ;
 
     // 从iSelected 复制到 (iArrayHit - 1) 
    CopyRow(iSelected, (iArrayHit  -   1 ) );

    iSelected  =   0 ;
    iArrayHit  =   - 1 ;
}

// 移动鼠标的时候建立 一个div暂时保存单元格的内容
function  onMouseDown(e)
{ 
    bDragMode     =   true ;
     var  src  =  e.srcElement;
     var  c  =  e.srcElement;

     // 寻找最近的TD节点
     while  (src.tagName  !=   " TD " )
        src  =  src.parentElement;
        
    objDragItem  =  document.createElement( " DIV " );
    objDragItem.innerHTML         =  src.innerHTML;
    objDragItem.style.height     =  src.currentStyle.height;
    objDragItem.style.width      =  src.currentStyle.width;
    objDragItem.style.background      =  src.currentStyle.backgroundColor;
    objDragItem.style.fontColor     =  src.currentStyle.fontColor;
    objDragItem.style.position      =   " absolute " ;
    objDragItem.selectIndex         =  src.selectIndex;
     while  (c.offsetParent  !=   null )
        {
        objDragItem.style.y  +=  c.offsetTop;
        objDragItem.style.x  +=  c.offsetLeft;
        c  =  c.offsetParent;
    }
     objDragItem.style.borderStyle     =   " outset " ;
    objDragItem.style.display     =   " none " ;
    src.insertBefore(objDragItem);
}

function  onMouseMove(e)
{
  
     if ( ! bDragMode  ||   ! objDragItem)  return ;
 
      var  midWObj  =  objDragItem.style.posWidth  /   2 ;
     // var midWObj = objDragItem.style.posHeight / 2;
     var  midHObj  =   12 ;

     var  intTop  =  e.clientY  +  element.document.body.scrollTop;
     var  intLeft  =  e.clientX  +  element.document.body.scrollLeft;


     var  cx = 0 ,cy = 0 ;
     var  elCurrent  =  objDragItem.offsetParent;
                while  (elCurrent.offsetParent  !=   null ) {
                  cx  +=  elCurrent.offsetTop;
                  cy  +=  elCurrent.offsetLeft;
                  elCurrent  =  elCurrent.offsetParent;
               }
 
      objDragItem.style.pixelTop   =  intTop   -  cx  -  midHObj;
      objDragItem.style.pixelLeft  =  intLeft  -  cy  -  midWObj;


     if (objDragItem.style.display  ==   " none " ) objDragItem.style.display  =   "" ;
  
    iArrayHit  =  CheckHit(intTop , intLeft , e);
     
    e.cancelBubble  =   false ;
    e.returnValue  =   false ;
}

  // 检查移动到了哪一行
function  CheckHit(y,x,e)
{ 
    midWObj  =  objDragItem.style.posWidth  /   2 ; 
    midHObj  =   12 ; 
 
     for ( var  i = 0 ; i  <  rowCount; i ++ )
    {
         if ( (y)  >  (arrHitTest[i][ 0 ])  &&  (y)  <  (arrHitTest[i][ 3 ] ))  // + 100))
        {
            ChangeHeader(i);
             return  i  +   1 ;
        }
    }
    
     return   - 1 ;    
}

  // 复制内容
function  CopyRow(from, to)
{ 
     for ( var  i  = 0  ; i <  arrHitTest.length ; i ++  ) 
    {
//         alert(arrHitTest[i][3]) ;
    } 
    
     //  alert(from + "__"  + to) ;
 
     if (from  ==  to)  return ;
 
     var  origfrom  =  from;
     var  origto  =  to;
     var  iDiff  =   0 ; 
      
     if ( from  >  to )
    { 
        iDiff  =  from  -  to; 
         
         var  saveObj      =  tbody.childNodes[from].firstChild.innerHTML;
         var  saveWidth      =  tbody.childNodes[from].firstChild.width; 
        
         for ( var  i  =   0  ; i  <  iDiff; i ++ )
        {
             tbody.childNodes[from].firstChild.innerHTML  =   tbody.childNodes[ from  -   1  ].firstChild.innerHTML;
             tbody.childNodes[from].firstChild.width  =   tbody.childNodes[ from  -   1  ].firstChild.width;
             from -- ;
        }
        tbody.childNodes[to].firstChild.innerHTML      =  saveObj;
        tbody.childNodes[to].firstChild.width  =  saveWidth; 
    }
     else
    {

        iDiff  =  to  -  from;

         var  saveObj      =  tbody.childNodes[from].firstChild.innerHTML;
         var  saveWidth      =  tbody.childNodes[from].firstChild.width; 

         for ( var  i  =   0  ; i  <  iDiff; i ++ )
        {
             tbody.childNodes[from].firstChild.innerHTML  =   tbody.childNodes[ from  +   1  ].firstChild.innerHTML;
             tbody.childNodes[from].firstChild.width  =   tbody.childNodes[ from  + 1  ].firstChild.width;
            from ++ ;
        }

        tbody.childNodes[to].firstChild.innerHTML      =  saveObj;
        tbody.childNodes[to].firstChild.width  =  saveWidth; 
    }
 

     for ( var  i  =   0  ; i  <  rowCount; i ++ )
            tbody.childNodes[to].firstChild.selectIndex  =  i;
 

    InitHeader();
     return  ;
     // 以下是对第一行以外的行进行操作
     for  (  var  iRowInsert  =   0  ; iRowInsert  <  tbody.rows.length; iRowInsert ++  )
    {
        from  =  origfrom;
        to  =  origto;
         if ( from  >  to )
        {
            iDiff  =  from  -  to;
             // var saveObj = tbody.children[iRowInsert].children[from].innerHTML
             for ( var  i  =   0  ; i  <  iDiff; i ++ )
            {
                tbody.children[iRowInsert].children[from].innerHTML  =  tbody.children[iRowInsert].children[from  -   1 ].innerHTML;
                from -- ;
            }
            tbody.children[iRowInsert].children[to].innerHTML  =  saveObj;

        }
         else
        {
            iDiff  =  to  -  from;
             var  saveObj  =  tbody.children[iRowInsert].children[from].innerHTML
             for ( var  i  =   0  ; i  <  iDiff; i ++ )
            {
                tbody.children[iRowInsert].children[from].innerHTML  =  tbody.children[iRowInsert].children[from  +   1 ].innerHTML;
                from ++ ;
            }
            tbody.children[iRowInsert].children[to].innerHTML  =  saveObj;
        }
    }
}

 
</ script >