如何基于JS的WEB会议室实现预订拖拽式图形界面？

很早之前写的，后来由于这个功能模块取消，最终没有上线，所以与Server交互的那部分还没有写，不过那部分方案我也已经出来了，而且现在客户端这一部分已经通过了比较完备的测试。大家看看这一部分的代码，应该一看就懂。那时候也不知道那么多JS的UI库，所以全部都是自己绘制的，界面有点简陋，希望凑或者看吧，再就是我们这个项目是局域网项目，所以大家用的都是IE，没有考虑跨浏览器的因素。发出来希望对做同样应用的同志少走点弯路，我写的时候，网上没有这方面的代码，现在有没有就不知道了。

网页代码

<%...@pagecontentType="text/html;charset=gb2312"pageEncoding="GB2312"%>
<%...@pagelanguage="java"%>
<%...@pageimport="java.util.List"%>
<style>...
th.timem{...}{font-size:8pt;font-family:TimesNewRoman;}
td.reserved{...}{background-color:#FF0066}
td.free{...}{background-color:#99CCFF}
td.selected{...}{background-color:#ccCCFF}
</style>
<scriptlanguage="JavaScript"type="text/javascript"src="timetable.js"></script>
<script>...
<!--
vardragging=false;//是否在拖拽
varOrignCell="";//开始格位
varCurrentCell="";//当前格位
varpope;
window.onload=function()
...{
try...{
pope=document.getElementById("pop");
vartp=document.getElementById('TablePosition');
vartt=CreateTable();
tp.appendChild(tt);
SetReserves();
document.getElementById('2-5').className="reserved";
document.getElementById('5-10').className="reserved";//fortest
}catch(e)
...{
alert(e.name+":"+e.message);
}
}
//设置已预订单元
functionSetReserves()
...{
//InserttheReservedCellsIntialationbySetReserve()

}
-->
</script>
<divid="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;">
<divonclick="Reserve()"style="{cursor:hand;}">预订</div>
<hrsize=0.1color=#FF66CC;>
<divonclick="Cancel()"style="{cursor:hand;}">取消</div>
</div>
<divid="TablePosition">
</div>