As you say !
Code:
<html>
<head>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
background-color:#FFF;
}
#footer{
height:30px;
vertical-align:middle;
text-align:center;
clear:both;
padding-right:3px;
background-color:#317082;
margin-top:2px;
width:840px;
}
#footer form{
margin:0px;
margin-top:2px;
}
#dhtmlgoodies_dragDropContainer{ /* Main container for this script */
width:0px;
height:0px;
border:1px solid #317082;
background-color:#FFF;
-moz-user-select:none;
}
#dhtmlgoodies_dragDropContainer ul{ /* General rules for all <ul> */
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
padding:0px;
}
#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{ /* Movable items, i.e. <LI> */
list-style-type:none;
height:15px;
padding:0px;
margin-bottom:0px;
cursor:pointer;
font-size:0.9em;
}
li#indicateDestination{ /* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
background-color:#FFFFFF;
}
/* LEFT COLUMN CSS */
div#dhtmlgoodies_listOfItems{ /* Left column "Available students" */
float:left;
padding-left:0px;
padding-right:0px;
/* CSS HACK */
width: 90px; /* IE 5.x */
width/* */:/**/90px; /* Other browsers */
width: /**/90px;
}
#dhtmlgoodies_listOfItems ul{ /* Left(Sources) column <ul> */
height:400px;
}
div#dhtmlgoodies_listOfItems div{
border:0px solid #999;
}
div#dhtmlgoodies_listOfItems div ul{ /* Left column <ul> */
margin-left:0px; /* Space at the left of list - the arrow will be positioned there */
}
#dhtmlgoodies_listOfItems div p{ /* Heading above left column */
margin:40px;
font-weight:bold;
padding-left:9px;
background-color:#FFFFFF;
color:#FFFFFF;
margin-bottom:5px;
}
/* END LEFT COLUMN CSS */
#dhtmlgoodies_dragDropContainer .mouseover{ /* Mouse over effect DIV box in right column */
background-color:#E2EBED;
border:1px solid #317082;
}
/* Start main container CSS */
div#dhtmlgoodies_mainContainer{ /* Right column DIV */
width:90px;
float:left;
}
#dhtmlgoodies_mainContainer div{ /* Parent <div> of small boxes */
float:left;
margin-right:0px;
margin-bottom:10px;
margin-top:1px;
border:1px solid #999;
/* CSS HACK */
width: 90px; /* IE 5.x */
width/* */:/**/90px; /* Other browsers */
width: /**/90px;
}
#dhtmlgoodies_mainContainer div ul{
margin-left:0px;
}
#dhtmlgoodies_mainContainer div p{ /* Heading above small boxes */
margin:0px;
padding:0px;
padding-left:0px;
font-weight:bold;
background-color:#FFFFFF;
color:#FFF;
margin-bottom:0px;
}
#dhtmlgoodies_mainContainer ul{ /*White cells ,i.e <ul> */
width:90px;
height:90px;
border:0px;
margin-bottom:0px;
overflow:hidden;
background-color:#FFFFFF;
}
#dragContent{ /* Drag container */
position:absolute;
width:150px;
height:20px;
display:none;
margin:0px;
padding:0px;
z-index:2000;
}
#dragDropIndicator{ /* DIV for the small arrow */
position:absolute;
width:7px;
height:10px;
display:none;
z-index:1000;
margin:0px;
padding:0px;
}
</style>
<style type="text/css" media="print">
div#dhtmlgoodies_listOfItems{
display:none;
}
body{
background-color:#FFF;
margin-left: 20px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 50px;
}
img{
display:none;
}
#dhtmlgoodies_dragDropContainer{
border:0px;
width:0%;
}
</style>
<script type="text/javascript">
/* VARIABLES YOU COULD MODIFY */
var boxSizeArray = [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6]; // Array indicating how many items there is rooom for in the right column ULs
var arrow_offsetX = -5; // Offset X - position of small arrow
var arrow_offsetY = 0; // Offset Y - position of small arrow
var arrow_offsetX_firefox = -6; // Firefox - offset X small arrow
var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow
var verticalSpaceBetweenListItems = 1; // Pixels space between one <li> and next
// Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li
var indicateDestionationByUseOfArrow = true; // Display arrow to indicate where object will be dropped(false = use rectangle)
var cloneSourceItems = true; // Items picked from main container will be cloned(i.e. "copy" instead of "cut").
var cloneAllowDuplicates = true; // Allow multiple instances of an item inside a small box(example: drag Student 1 to team A twice
/* END VARIABLES YOU COULD MODIFY */
var dragDropTopContainer = false;
var dragTimer = -1;
var dragContentObj = false;
var contentToBeDragged = false; // Reference to dragged <li>
var contentToBeDragged_src = false; // Reference to parent of <li> before drag started
var contentToBeDragged_next = false; // Reference to next sibling of <li> to be dragged
var destinationObj = false; // Reference to <UL> or <LI> where element is dropped.
var dragDropIndicator = false; // Reference to small arrow indicating where items will be dropped
var ulPositionArray = new Array();
var mouseoverObj = false; // Reference to highlighted DIV
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
var indicateDestinationBox = false;
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
}
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
}
return returnValue;
}
function cancelEvent()
{
return false;
}
function initDrag(e) // Mouse button is pressed down on a LI
{
if(document.all)e = event;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
dragTimer = 0;
dragContentObj.style.left = e.clientX + sl + 'px';
dragContentObj.style.top = e.clientY + st + 'px';
contentToBeDragged = this;
contentToBeDragged_src = this.parentNode;
contentToBeDragged_next = false;
if(this.nextSibling){
contentToBeDragged_next = this.nextSibling;
if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;
}
timerDrag();
return false;
}
function timerDrag()
{
if(dragTimer>=0 && dragTimer<10){
dragTimer++;
setTimeout('timerDrag()',10);
return;
}
if(dragTimer==10){
if(cloneSourceItems && contentToBeDragged.parentNode.id=='allItems'){
newItem = contentToBeDragged.cloneNode(true);
newItem.onmousedown = contentToBeDragged.onmousedown;
contentToBeDragged = newItem;
}
dragContentObj.style.display='block';
dragContentObj.appendChild(contentToBeDragged);
}
}
function moveDragContent(e)
{
if(dragTimer<10){
if(contentToBeDragged){
if(contentToBeDragged_next){
contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
}else{
contentToBeDragged_src.appendChild(contentToBeDragged);
}
}
return;
}
if(document.all)e = event;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
dragContentObj.style.left = e.clientX + sl + 'px';
dragContentObj.style.top = e.clientY + st + 'px';
if(mouseoverObj)mouseoverObj.className='';
destinationObj = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox)indicateDestinationBox.style.display='none';
var x = e.clientX + sl;
var y = e.clientY + st;
var width = dragContentObj.offsetWidth;
var height = dragContentObj.offsetHeight;
var tmpOffsetX = arrow_offsetX;
var tmpOffsetY = arrow_offsetY;
if(!document.all){
tmpOffsetX = arrow_offsetX_firefox;
tmpOffsetY = arrow_offsetY_firefox;
}
for(var no=0;no<ulPositionArray.length;no++){
var ul_leftPos = ulPositionArray[no]['left'];
var ul_topPos = ulPositionArray[no]['top'];
var ul_height = ulPositionArray[no]['height'];
var ul_width = ulPositionArray[no]['width'];
if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){
var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;
if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;
if(noExisting<boxSizeArray[no-1] || no==0){
dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';
var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');
var clonedItemAllreadyAdded = false;
if(cloneSourceItems && !cloneAllowDuplicates){
for(var liIndex=0;liIndex<subLi.length;liIndex++){
if(contentToBeDragged.id == subLi[liIndex].id)clonedItemAllreadyAdded = true;
}
if(clonedItemAllreadyAdded)continue;
}
for(var liIndex=0;liIndex<subLi.length;liIndex++){
var tmpTop = getTopPos(subLi[liIndex]);
if(!indicateDestionationByUseOfArrow){
if(y<tmpTop){
destinationObj = subLi[liIndex];
indicateDestinationBox.style.display='block';
subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);
break;
}
}else{
if(y<tmpTop){
destinationObj = subLi[liIndex];
dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';
dragDropIndicator.style.display='block';
break;
}
}
}
if(!indicateDestionationByUseOfArrow){
if(indicateDestinationBox.style.display=='none'){
indicateDestinationBox.style.display='block';
ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);
}
}else{
if(subLi.length>0 && dragDropIndicator.style.display=='none'){
dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';
dragDropIndicator.style.display='block';
}
if(subLi.length==0){
dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'
dragDropIndicator.style.display='block';
}
}
if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];
mouseoverObj = ulPositionArray[no]['obj'].parentNode;
mouseoverObj.className='mouseover';
return;
}
}
}
}
/* End dragging
Put <LI> into a destination or back to where it came from.
*/
function dragDropEnd(e)
{
if(dragTimer==-1)return;
if(dragTimer<10){
dragTimer = -1;
return;
}
dragTimer = -1;
if(document.all)e = event;
if(cloneSourceItems && (!destinationObj || (destinationObj && (destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')))){
contentToBeDragged.parentNode.removeChild(contentToBeDragged);
}else{
if(destinationObj){
if(destinationObj.tagName=='UL'){
destinationObj.appendChild(contentToBeDragged);
}else{
destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);
}
mouseoverObj.className='';
destinationObj = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox){
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
contentToBeDragged = false;
return;
}
if(contentToBeDragged_next){
contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
}else{
contentToBeDragged_src.appendChild(contentToBeDragged);
}
}
contentToBeDragged = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox){
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
mouseoverObj = false;
}
/*
Preparing data to be saved
*/
function saveDragDropNodes()
{
var saveString = "";
var uls = dragDropTopContainer.getElementsByTagName('UL');
for(var no=0;no<uls.length;no++){ // LOoping through all <ul>
var lis = uls[no].getElementsByTagName('LI');
for(var no2=0;no2<lis.length;no2++){
if(saveString.length>0)saveString = saveString + ";";
saveString = saveString + uls[no].id + '|' + lis[no2].id;
}
}
document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>';
}
/* Reset the form */
function dragDropResetForm()
{
var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
var uls = mainContainer.getElementsByTagName('UL');
for(var no=0;no<uls.length;no++)
dhtmlgoodies_listOfItems.appendChild(uls[no]);
}
function initDragDropScript()
{
dragContentObj = document.getElementById('dragContent');
dragDropIndicator = document.getElementById('dragDropIndicator');
dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');
document.documentElement.onselectstart = cancelEvent;;
var listItems = dragDropTopContainer.getElementsByTagName('LI'); // Get array containing all <LI>
var itemHeight = false;
for(var no=0;no<listItems.length;no++){
listItems[no].onmousedown = initDrag;
listItems[no].onselectstart = cancelEvent;
if(!itemHeight)itemHeight = listItems[no].offsetHeight;
if(MSIE && navigatorVersion/1<6){
listItems[no].style.cursor='hand';
}
}
var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
var uls = mainContainer.getElementsByTagName('UL');
itemHeight = itemHeight + verticalSpaceBetweenListItems;
for(var no=0;no<uls.length;no++){
uls[no].style.height = itemHeight * boxSizeArray[no] + 'px';
}
var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');
var itemBox = leftContainer.getElementsByTagName('UL')[0];
document.documentElement.onmousemove = moveDragContent; // Mouse move event - moving draggable div
document.documentElement.onmouseup = dragDropEnd; // Mouse move event - moving draggable div
var ulArray = dragDropTopContainer.getElementsByTagName('UL');
for(var no=0;no<ulArray.length;no++){
ulPositionArray[no] = new Array();
ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);
ulPositionArray[no]['top'] = getTopPos(ulArray[no]);
ulPositionArray[no]['width'] = ulArray[no].offsetWidth;
ulPositionArray[no]['height'] = ulArray[no].clientHeight;
ulPositionArray[no]['obj'] = ulArray[no];
}
if(!indicateDestionationByUseOfArrow){
indicateDestinationBox = document.createElement('LI');
indicateDestinationBox.id = 'indicateDestination';
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
}
window.onload = initDragDropScript;
var count=0;
function clickCount(f) {
count += 1;
return count;
}
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
function makeDate(x) {
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
now = new Date();
now = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight
var theDay = new Date(now.getTime()+(x*24*60*60*1000));
return days[theDay.getDay()] + ' ' + theDay.getDate() + '-' + (theDay.getMonth()+1) + '-' + theDay.getFullYear();
}
function updateFields(n) {
for(var i=0; i <= 6; i++) {
document.getElementById("date"+i).innerHTML = makeDate(i+n);
}
/* document.getElementById("date1").innerHTML = makeDate(n);*/
}
function resetPage(){
document.getElementById("userForm").reset();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<div align="center">
<table width="75%" >
<tr>
<td height="56" colspan="2"><div align="center">
<p class="style2"><img src="imagesCAYG1FYC.jpg" width="105" height="40" align="left"><span class="style3"><img src="CRISLOGO.JPG" width="69" height="40" align="right"></span></p>
<p class="style2"><span class="style3">INCIDENT MANAGEMENT SYSTEM</span></p>
</div></td>
</tr>
</table>
<div id="dhtmlgoodies_dragDropContainer">
<div align="left">
<table width="700" height="300" border="1" align="left">
<tr bgcolor="#99CCFF"><td width="66"><div align="left">Day/ Time</div></td>
<td width="92" id="date0"><script type="text/javascript">document.write(makeDate(0));</script></td>
<td width="92" id="date1"><script type="text/javascript">document.write(makeDate(1));</script></td>
<td width="92" id="date2"><script type="text/javascript">document.write(makeDate(2));</script></td>
<td width="92" id="date3"><script type="text/javascript">document.write(makeDate(3));</script></td>
<td width="92" id="date4"><script type="text/javascript">document.write(makeDate(4));</script></td>
<td width="92" id="date5"><script type="text/javascript">document.write(makeDate(5));</script></td>
<td width="92" id="date6"><script type="text/javascript">document.write(makeDate(6));</script></td>
<td width="90">Names</td>
</tr>
<tr>
<td height="30" bgcolor="#99CCFF"><p>6:00am-</p>
<p>2:00pm</p></td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2"></ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2"></ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box1">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td rowspan="4" bgcolor="#FFCCCC">
<div id="dhtmlgoodies_listOfItems">
<div>
<ul id="allItems">
<li id="node1">A</li>
<li id="node2">B</li>
<li id="node3">C</li>
<li id="node4">D</li>
<li id="node5">E</li>
<li id="node6">F</li>
<li id="node7">G</li>
<li id="node8">H</li>
<li id="node9">I</li>
<li id="node10">J</li>
<li id="node11">K</li>
<li id="node12">L</li>
<li id="node13">M</li>
<li id="node14">N</li>
<li id="node15">O</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td bgcolor="#99CCFF"><p>09:30am-</p>
<p>6:00pm</p></td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td bgcolor="#99CCFF"><p>02:00pm-</p>
<p>10:00pm</p></td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2"></ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td height="107" bgcolor="#99CCFF"><p>8:00pm-</p>
<p>7:00am</p></td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2"></ul>
</div>
</div>
</td>
<td bgcolor="#FFFFFF">
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<ul id="box2">
</ul>
</div>
</div>
</td>
</tr>
</table>
<ul id="dragContent"></ul>
<div id="dragDropIndicator"><img src="arrow.gif"></div>
<div id="footer">
<table align="center">
<tr>
<td><input type="button" onclick="history.go(0)" value="CURRENT PAGE"></td>
<td><a href="#"><button type="button" onclick="updateFields(7 * clickCount());return false;">NEXT</button></a></td>
<td><div id="dragContent"></div><input type="button" onclick="dragDropResetForm();return false" value="RESET"></td>
</tr>
</table>
</div>
</body>
</html>
