Dashboars Test

by dirkk0

HTML

<div id="iGoogle"><div id="column1"><div class="Widget"><div class="WidgetHeader PurpleWidgetHeader">Widget 1</div><div class="WidgetBody"></div></div><div class="Widget"><div class="WidgetHeader GreenWidgetHeader">Widget 2</div><div class="WidgetBody"></div></div><div class="Widget"><div class="WidgetHeader GrayWidgetHeader">Widget 3</div><div class="WidgetBody"></div></div></div><div id="column2"><div class="Widget"><div class="WidgetHeader GrayWidgetHeader">Widget 4</div><div class="WidgetBody"></div></div></div><div id="column3"><div class="Widget"><div class="WidgetHeader GreenWidgetHeader">Widget 5</div><div class="WidgetBody"></div></div><div class="Widget"><div class="WidgetHeader GrayWidgetHeader">Widget 6</div><div class="WidgetBody"></div></div></div></div>

CSS

/* Entire Page has been divided into 3Columns. 
Note: iGoogle Page has 3 columns */
#column1,#column2,#column3 
{
display:inline-block;
float:left;
width: 33%;            
height: auto;            
text-align:center;
}

/* Css Classes for Entire Widget */

.Widget 
{         
margin: 10px;
margin-left: auto;
margin-right: auto;
width: 95%;
min-height: 200px;
border: 1px solid Black;
}


/* Css Classes for Widget Headers */

.WidgetHeader 
{
height: 25px;    
cursor: move; 
text-align: left;
padding-left: 3px;
color: White;
font-weight: bold;                      
}        

.GreenWidgetHeader 
{
background-color:Green;
}

.GrayWidgetHeader 
{
background-color:Gray;
}

.PurpleWidgetHeader 
{
background-color:Purple;
}

/* Css Classes for Widget Body */
.WidgetBody 
{
min-height: 175px;
height:auto;
background: #F0F0F0;
}

/* Placeholder while dragging the widget using jQuery*/
.ui-sortable-placeholder { 
border: 1px dashed black; 
visibility: visible !important; 
height: 50px !important; 
}
.ui-sortable-placeholder * { visibility: hidden; }

.footer 
{
clear:both;
display:block;                                    
position:absolute;         
color: Green;                
bottom: 5px;
right: 5px;
}

JavaScript

$(document).ready(function () {  
  
$("#column1,#column2,#column3").sortable({  
connectWith: "#column1,#column2,#column3",  
handle: '.WidgetHeader',  
opacity: 0.6  
});  
  
$("#column1,#column2,#column3").disableSelection();  
  
});