课表拖放的实现_table.cells[i].style-CSDN博客

本文链接：https://blog.csdn.net/PPLUNCLE/article/details/39743

<!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;
    }
   }
}
}
}

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>