jquery Imitation igoogle Implementation Drag window sample code _jquery

Google is the Ajax special effects used incisively and vividly, Google suggest, Google Map,igoogle can drag windows and so on ... Today to do a similar effect of a Web site, modeled on IGoogle did a simple demo.

This demo is made directly from a jquery framework: Easywidgets. This framework is available for free download of http://plugins.jquery.com/project/easywidgets.

Nonsense will not say more, directly to the source code posted out, let everyone learn!
Html

<script type= "Text/javascript" src= "Js/jquery-ui.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.easywidgets.js" ></script>
<script src= "Js/example.js" type= "Text/javascript" ></script>
 

CSS

body{margin:0; padding:0 background-color:silver; font-family: ' Lucida Grande ', ' Lucida Sans Unicode ', ' XXFarEastFont-Arial ', ' Neo-Arial ', Aria 
L,verdana,sans-serif; 
Color: #666; 
font-size:20px; 
line-height:150%; 
#left {width:380px; height:100%; padding:10px; position:absolute; top:10px; left:10px; border:solid Red 2px; #left. widget {width:340px; height:150px; padding 10px; margin:20px; border:solid Red 2px; background-color:white
; #left. Widget. widget-header {width:340px; height:30px; padding:0; margin:0; color:red; position:static; Backgrou
Nd-color:gray; 

#middle {width:400px; height:100%; position:absolute; top:10px; left:435px; padding:10px; margin:0 30px 0; 
Border:solid Red 2px; #middle. widget {width:360px; height:150px; padding 10px; margin:20px; border:solid Red 2px; background-color:whi
Te #middle. Widget. widget-header {width:360px; height:30px; padding:0; margin:0; color:red; position:static; backgr
Ound-color:gray; } #right {width:380px;
height:100%;
padding:10px;
Position:absolute;
top:10px;
right:10px; 
Border:solid Red 2px; #right. widget {width:340px; height:150px; padding 10px; margin:20px; border:solid Red 2px; background-color:whit
E #right. Widget. widget-header {width:340px; height:30px; padding:0; margin:0; color:red; position:static; Backgro
Und-color:gray; }

JavaScript code

$ (document). Ready (function () { 
$.fn. Easywidgets ({
i18n: { 
edittext: ' edit ', 
closetext: ' Close ', 
extendtext: ' unfold ', collapsetext 
: ' Folding ', 
   canceledittext: ' Cancel ' 
}
});