My attachment is a timetable where names can be dropped to any of the white cells. It has got 3 buttons : 1) NEXT - Takes user to next week 2) CURRENT - Takes user to present week 3) RESET - All the white cells should be emptied of the dragged names. I have made a function dragDropResetForm for resetting the white cells (starts at line no. 447 in my latest attachment) Code: 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]); } dhtmlgoodies_mainContainer ---> white cells dhtmlgoodies_listOfItems ---> name list (last column) Obviously, it doesn't run. Plz help !
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>
