鼠标拖动表格中的数据，表格美化（系列二）

最新推荐文章于 2022-10-18 17:39:38 发布
limon758
最新推荐文章于 2022-10-18 17:39:38 发布
阅读量239
点赞数
分类专栏： javaScript 文章标签：生物 HTML
本文链接：https://blog.csdn.net/heisetoufa/article/details/83265593
版权
javaScript 专栏收录该内容
163 篇文章 0 订阅
订阅专栏
效果图：表格上边的文字可以通过鼠标的拖拽到下边的表格内

代码：
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">   
  <HTML>   
    <HEAD>   
      <title>WebForm2</title>   
      <meta   name="GENERATOR"   content="Microsoft   Visual   Studio   .NET   7.1">   
      <meta   name="CODE_LANGUAGE"   content="Visual   Basic   .NET   7.1">   
      <meta   name="vs_defaultClientScript"   content="JavaScript">   
      <meta   name="vs_targetSchema"   content="http://schemas.microsoft.com/intellisense/ie5">   
      <SCRIPT   language="javascript">   

  /*--------全局变量-----------*/   
  var   x0,y0,x1,y1,isreplace;   
  var   movable   =   false;   
  var   preCell   =   null;   
  var   normalColor   =   null;   
  var   preColor   =   "lavender";   
  var   endColor   =   "#FFCCFF";   
  /*--------全局变量-----------*/   

  //得到控件的绝对位置   
  function   getPos(cell)   
  {   
    var   pos   =   new   Array();   
    var   t=cell.offsetTop;   
    var   l=cell.offsetLeft;   
    while(cell=cell.offsetParent)   
    {   
      t+=cell.offsetTop;   
      l+=cell.offsetLeft;   
    }   
    pos[0]   =   t;       //纵坐标   
    pos[1]   =   l;       //横坐标   
    return   pos;   
  }   

  //当鼠标拖动某一个td时,显示临时图层   
  function   showDiv(ischange)   
  {   
    var   ischange=ischange   
    isreplace=ischange                                             //得到触发该事件的是哪个table来决定是否替换   
    var   obj   =   event.srcElement;                           //得到触发该事件的对象,也就是对触发该事件对象的一个引用   
    var   pos   =   new   Array();                                     //定义一个数组用来存放位置参数   
    //获取过度图层   
    var   oDiv   =   document.all.tempDiv;                 //对临时层的一个引用   
    if(obj.tagName.toLowerCase()   ==   "td")   
    {   
      obj.style.cursor   =   "hand";                           //当按下鼠标时,鼠标模式改成手型   
      pos   =   getPos(obj);                                           //得到该td的位置(包括横纵坐标)   
      //计算中间过度层位置，赋值   
      oDiv.style.width   =   obj.offsetWidth;         //得到td的宽,赋值给临时层tempDiv   
      oDiv.style.height   =   obj.offsetHeight;     //得到td的高,赋值给临时层tempDiv   
      oDiv.style.top   =   pos[0];                               //得到该td的纵坐标的位置,赋值给临时层tempDiv   
      oDiv.style.left   =   pos[1];                             //得到该td的横坐标的位置,赋值给临时层tempDiv   
      oDiv.innerHTML   =   obj.innerHTML;                 //得到该td的文本显示内容,赋值给临时层tempDiv   
      oDiv.style.display   =   "";                               //显示临时层,也就是当鼠标选中某一个td,按下去时显示的那个紫红色的框框   
      x0   =   pos[1];   
      y0   =   pos[0];   
      x1   =   event.clientX;                                         //返回当前鼠标所在位置的横坐标   
      y1   =   event.clientY;                                         //返回当前鼠标所在位置的纵坐标     
      //记住原td   
      normalColor   =   obj.style.backgroundColor;     //得到触发该事件对象的背景色   
      obj.style.backgroundColor   =   preColor;           //改变触发该事件的对象的背景色   
      preCell   =   obj;                                                         //赋值给另外一个空对象(属公共的变量)   

      movable   =   true;                                                       //标识有td在移动   
    }   
  }   
  //当拖动一个td时,经过其他td时所处理的事件   
  function   dragDiv()   
  {   
    if(movable)                                                                     //当上面的showDiv事件为真时,执行下面的代码   
    {   
      var   oDiv   =   document.all.tempDiv;                         //对临时层的一个引用   
      var   pos   =   new   Array();                                             //定义一个存放位置的数组   
      oDiv.style.top   =   event.clientY   -   y1   +   y0;       //定义临时层的位置(纵坐标)为:当前鼠标位置(纵坐标)-按下鼠标时的鼠标位置(纵坐标)+原来td的纵坐标   
      oDiv.style.left   =   event.clientX   -   x1   +   x0;     //定义临时层的位置(横坐标)为:当前鼠标位置(横坐标)-按下鼠标时的鼠标位置(横坐标)+原来td的横坐标   
      var   oTable   =   document.all.tb2;     
      //根据条件显示不同背景色   
      for(var   i=0;   i<oTable.cells.length;   i++)   
      {   
        if(oTable.cells[i].tagName.toLowerCase()   ==   "td")   
        {   
          pos   =   getPos(oTable.cells[i]);   
          if(event.x>pos[1]   &&   event.x<pos[1]+oTable.cells[i].offsetWidth   &&   event.y>pos[0]   &&   event.y<pos[0]+oTable.cells[i].offsetHeight)   
          {   
            if(oTable.cells[i]   !=   preCell)   
              oTable.cells[i].style.backgroundColor   =   endColor;             
          }   
          else   
          {   
            if(oTable.cells[i]   !=   preCell)   
              oTable.cells[i].style.backgroundColor   =   normalColor;   
          }   
        }   
      }         
    }   
  }   

  function   hideDiv()   
  {   
    if(movable)   
    {   
      var   oTable   =   document.all.tb2;   
      var   pos   =   new   Array();     
      if(preCell   !=   null)   
      {   
        for(var   i=0;   i<oTable.cells.length;   i++)   
        {         
          pos   =   getPos(oTable.cells[i]);   
          //计算鼠标位置，是否在某个单元格的范围之内   
          if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth     &&   event.y>pos[0]&&   event.y<pos[0]+oTable.cells[i].offsetHeight)   
          {   
            if(oTable.cells[i].tagName.toLowerCase()   ==   "td"   &&   oTable.cells[i].style.backgroundColor.toLowerCase()=="#ffccff")   
            {   
              if(isreplace=="2"){                 //如果是下面表格内部拖动,则内容互换   
                  preCell.innerHTML   =   oTable.cells[i].innerHTML;   
              }   
        //当下面的td中有内容时,则上面的课程将与下面的课程互换----注意:这个if和下面紧接着的if位置不能互换.   
        if(isreplace=="1"   &&   oTable.cells[i].innerText.length   >   1){               
            preCell.innerHTML=   oTable.cells[i].innerHTML   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   
        //当下面的td中没有内容时,则上面的课程将被移除----注意:这个if和上面紧接着的if位置不能互换.   
        if(isreplace=="1"   &&   oTable.cells[i].innerText.length   ==   1){                 
            preCell.innerHTML=""   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   

        if(isreplace=="2"){   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   
              //清除原单元格和目标单元格的样式   
              preCell.style.backgroundColor   =   normalColor;   
              oTable.cells[i].style.backgroundColor   =   normalColor;   
              oTable.cells[i].style.cursor   =   "";   
              preCell.style.cursor   =   "";   
              preCell.style.backgroundColor   =   normalColor;   
            }   
          }   
        }   
      }   
      movable   =   false;   
      //清除提示图层   
      document.all.tempDiv.style.display   =   "none";       
    }   
  }   
  //在页面提交时触发下面的事件,给隐藏字段赋值   
  function   getvalue(){   
      for(var   i=0;   i<oTable.cells.length;   i++){   
        document.all["kc_name"+i].value   =   oTable.cells[i].innerHTML;   
        //alert(document.all["kc_name"+i].value)   
      }   
  }   
  document.onmouseup   =   function()   
  {     
    hideDiv();   
    var   oTable   =   document.all.tb2;   
    for(var   i=0;   i<oTable.cells.length;   i++)   
      oTable.cells[i].style.backgroundColor   =   normalColor;   
  }   

  document.onmousemove   =   function()   
  {   
    dragDiv();   
  }   

  </SCRIPT>
  </HEAD>   
    <body   MS_POSITIONING="GridLayout">   
    <form   name="Form1"   method="post"   action="WebForm11.aspx"   id="Form1">   
          <table   id="tb1"   cellspacing="0"   onMouseDown="showDiv('1')"   onselectstart="return   false;"   border="0"   style="width:200px;border-collapse:collapse;BORDER-RIGHT:black   1px   solid;   BORDER-TOP:black   1px   solid;   FONT-SIZE:13px;   BORDER-LEFT:black   1px   solid;   BORDER-BOTTOM:black   1px   solid">   
    <tr>   
      <td>语文</td>           
    </tr>   
    <tr>   
      <td>数学</td>   
    </tr>   
    <tr>   
      <td>英语</td>   
    </tr>   
    <tr>   
      <td>物理</td>   
    </tr>   
    <tr>   
      <td>化学</td>   
    </tr>   
    <tr>   
      <td>地理</td>   
    </tr>   
    <tr>   
      <td>生物</td>   
    </tr>   
    <tr>   
      <td>历史</td>   
    </tr>   
    <tr>   
      <td>政治</td>   
    </tr>   
  </table>   
    <TABLE   style="BORDER-RIGHT:black   1px   solid;   BORDER-TOP:black   1px   solid;   FONT-SIZE:13px;   BORDER-LEFT:black   1px   solid;   BORDER-BOTTOM:black   1px   solid"   
          id="tb2"   onMouseDown="showDiv('2')"   onselectstart="return   false;"   cellpadding="0"   cellspacing="1"   
          bordercolor="#ffccff"   bgcolor="#999999"   width="200">   
          <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
      <input   type="hidden"   name="kc_name0"   value="">   
      <input   type="hidden"   name="kc_name1"   value="">   
      <input   type="hidden"   name="kc_name2"   value="">   
      <input   type="hidden"   name="kc_name3"   value="">   
      <input   type="hidden"   name="kc_name4"   value="">   
      <input   type="hidden"   name="kc_name5"   value="">   
      <input   type="hidden"   name="kc_name6"   value="">     
      <input   type="hidden"   name="kc_name7"   value="">   
      <input   type="hidden"   name="kc_name8"   value="">   
      </TABLE>   
            <DIV   id="tempDiv"   onselectstart="return   false"   style="cursor:hand;position:absolute;   border:1px   solid   black;   background-color:#FFCCFF;   display:none">   
        </DIV>   
      </form>   
    </body>   
  </HTML>