基于JS的WEB会议室预订拖拽式图形界面的实现
06年的一篇blog，转到这个博客上：
很早之前写的，后来由于这个功能模块取消，最终没有上线，所以与Server交互的那部分还没有写，不过那部分方案我也已经出来了，而且现在客户端这一部分已经通过了比较完备的测试。大家看看这一部分的代码，应该一看就懂。 那时候也不知道那么多js的UI库，所以全部都是自己绘制的，界面有点简陋，希望凑或者看吧，再就是我们这个项目是局域网项目，所以大家用的都是IE，没有考虑跨浏览器的因素。发出来希望对做同样应用的同志少走点弯路，我写的时候，网上没有这方面的代码，现在有没有就不知道了。
网页代码：
<%@page contentType="text/html; charset=gb2312" pageEncoding="GB2312" %> <%@ page language="java"%> <%@ page import="java.util.List" %> <style> th.timem {font-size: 8pt; font-family: Times New Roman;} td.reserved {background-color: #FF0066} td.free {background-color: #99CCFF} td.selected {background-color: #ccCCFF} </style> <script language="JavaScript" type="text/javascript" src="timetable.js"></script> <script> <!-- var dragging=false;//是否在拖拽 var OrignCell="";//开始格位 var CurrentCell="";//当前格位 var pope; window.onload=function() { try{ pope=document.getElementById("pop"); var tp=document.getElementById('TablePosition'); var tt=CreateTable(); tp.appendChild(tt); SetReserves(); document.getElementById('2-5').className="reserved"; document.getElementById('5-10').className="reserved";//for test }catch(e) { alert(e.name + ": " + e.message); } } //设置已预订单元 function SetReserves() { //Insert the Reserved Cells Intialation by SetReserve() } --> </script> <div id="pop" style="position:absolute;width:50; display: none; z-index:99; font-size: 13px; background:#FFCCFF;filter:alpha(opacity=40); border-style: solid; border-width: thin;border-color:#FF66CC; " > <div onclick="Reserve()" style="{cursor: hand;} ">预订</div> <hr size=0.1 color=#FF66CC;> <div onclick="Cancel()"style="{cursor: hand;} ">取消</div> </div> <div id="TablePosition" > </div>
//创建会议室预订情况时间表 function CreateTable() { var tt=document.createElement("table"); var tbody=document.createElement("tbody"); tt.onmouseout=OutDragT; tbody.onmouseout=CancleBubble; tt.appendChild(tbody); tt.border='1'; tt.id='TimeTable'; tt.cellSpacing ="1";//??????????? tt.borderColor="#6699ff"; tt.align='center'; tt.onselectstart =False; for(var i=0;i<6;i++) { var tr=document.createElement("tr"); for(var j=0;j<18;j++) { var hd=document.createElement("td"); hd.id=i+'-'+j; hd.innerHTML=" "; hd.onmousedown = BeginDrag; hd.onmousemove = OnDrag; hd.onmouseup = EndDrag; hd.className="free";///for test hd.onmouseover=onshow; if(i==0) { hd=document.createElement("th"); hd.className='timem'; hd.width='30'; if(j==0) { hd.innerHTML=" " }else{ var hour=8+Math.floor(j/2); var minutes=30*(j%2); hd.appendChild(document.createTextNode(hour+':'+minutes)); } } if(j==0&&i!=0) { hd=document.createElement("th"); hd.className='timem'; hd.appendChild(document.createTextNode('?'+i)); } tr.appendChild(hd); } tbody.appendChild(tr); } return tt; } function SetReserve(id) { document.getElementById(id)="reserved"; } //取消事件冒泡 function CancleBubble() { event.cancelBubble=true; } //拖拽选择开始函数 function BeginDrag() { if (event.button != 1) { return; } OrignCell=this.id; CurrentCell=this.id; if(ModifyClass()) { dragging=true; }else{ alert("????????!"); OrignCell=""; CurrentCell=""; } } //拖拽过程处理函数 function OnDrag() { if(dragging==false||this.id==CurrentCell) { return; } CurrentCell=this.id; if(!ModifyClass()) { Reverse() dragging=false; OrignCell=""; CurrentCell=""; pope.style.display = 'none'; alert("?????????????!"); } } //结束拖拽 function EndDrag() { if(dragging==false) { return; } dragging==false; pope.style.top=event.clientY pope.style.left=event.clientX pope.style.display = ""; } //本为处理鼠标过界操作后作他用 function OutDrag() { if(dragging==false) { return; } //??? Reverse(); dragging=false; } //Handler for mousemoveout of timetable function OutDragT() { var Tt=document.getElementById("TimeTable"); if(event.clientX<=Tt.offsetLeft||event.clientX>=(Tt.offsetLeft+Tt.offsetWidth)||event.clientY<=Tt.offsetTop||event.clientY>=(Tt.offsetTop+Tt.offsetHeight)) { OutDrag(); window.status=""; } } function False() { return false; } //修正各单元格的状态并返回结果 function ModifyClass() { Reverse(); for(var i=X1();i<=X2();i++) { for(var j=Y1();j<=Y2();j++) { var CName =document.getElementById(i+"-"+j).className; if(CName.indexOf("reserved")!=-1) { return false; } if(CName.indexOf("selected")!=-1) { continue; } if(CName.indexOf("free")!=-1) { document.getElementById(i+"-"+j).className="selected"; } } } return true; } //返回初始状态 function Reverse() { for(var i=1;i<6;i++) { for(var j=1;j<18;j++) { var CName =document.getElementById(i+"-"+j).className; if(CName.indexOf("selected")!=-1) { document.getElementById(i+"-"+j).className="free"; } } } } //取消选择 function Cancel() { pope.style.display = 'none'; OutDrag(); dragging=false; } //预订操作 function Reserve() { pope.style.display = 'none'; alert("????!") dragging=false; } //选择区域的横方向小坐标 function X1() { var Bx,Ex; var TArray=OrignCell.split('-'); Bx=parseInt(TArray[0]); TArray=CurrentCell.split('-'); Ex=parseInt(TArray[0]); return Bx<=Ex?Bx:Ex; } //选择区域的横方向大坐标 function X2() { var Bx,Ex; var TArray=OrignCell.split('-'); Bx=parseInt(TArray[0]); TArray=CurrentCell.split('-'); Ex=parseInt(TArray[0]); return Bx>=Ex?Bx:Ex; } //选择区域的纵方向小坐标 function Y1() { var Bx,Ex; var TArray=OrignCell.split('-'); Bx=parseInt(TArray[1]); TArray=CurrentCell.split('-'); Ex=parseInt(TArray[1]); return Bx<=Ex?Bx:Ex; } //选择区域的纵方向大坐标 function Y2() { var Bx,Ex; var TArray=OrignCell.split('-'); Bx=parseInt(TArray[1]); TArray=CurrentCell.split('-'); Ex=parseInt(TArray[1]); return Bx>=Ex?Bx:Ex; } //显示选择情况！ function onshow() { window.status="Cell:"+OrignCell+"::"+CurrentCell+dragging; }
