CSDN博客

img PPLUNCLE

课表拖放的实现

发表于2004/7/12 16:33:00  1215人阅读


<!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">&nbsp;
   </td>
    </tr>
 <tr align="center" width="50">
      <td height="22" bgcolor="#FFFFFF">&nbsp;
   </td>
    </tr>
 <tr align="center" width="50">
      <td height="22" bgcolor="#FFFFFF">&nbsp;
   </td>
    </tr>
 <tr align="center" width="50">
      <td height="22" bgcolor="#FFFFFF">&nbsp;
   </td>
    </tr>
 <tr align="center" width="50">
      <td height="22" bgcolor="#FFFFFF">&nbsp;
   </td>
    </tr>
 <tr align="center" width="50">
      <td height="22" bgcolor="#FFFFFF">&nbsp;
   </td>
    </tr>
 <tr align="center" width="50">
      <td height="22" bgcolor="#FFFFFF">&nbsp;
   </td>
    </tr>
 <tr align="center" width="50">
      <td height="22" bgcolor="#FFFFFF">&nbsp;
   </td>
    </tr>
 <tr align="center" width="50">
      <td height="22" bgcolor="#FFFFFF">&nbsp;
   </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>

0 0

相关博文

我的热门文章

img
取 消
img