1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Why doesn't it reser ?

Discussion in 'Web Design, HTML And CSS' started by Naash, Mar 13, 2009.

  1. Naash

    Naash New Member

    Joined:
    Jan 22, 2009
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    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 !
     
    Last edited by a moderator: Mar 13, 2009
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,283
    Likes Received:
    364
    Trophy Points:
    83
    Attachment removed. Try to post the code in the post
     
  3. Naash

    Naash New Member

    Joined:
    Jan 22, 2009
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    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>
    
    
     

Share This Page