Jquery imitates IGoogle to implement draggable window sample code

Google can be said to be the fullest special effects of ajax, such as google suggest, google map, igoogle draggable window, etc... Today we are going to create a website similar effect, and we have made a simple demo based on iGoogle.

This demo is made directly based on a Jquery framework: easywidgets. This framework is available for free download /project/easywidgets.

I won’t say much nonsense, just post the source code for everyone to learn!
html

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/" rel="external nofollow" rel="external nofollow" mce_href="css/" rel="external nofollow" rel="external nofollow" />
<script type="text/javascript" src="js/"></script>
<script type="text/javascript" src="js/"></script>
<script type="text/javascript" src="js/"></script> 
<script src="js/" type="text/javascript"></script>
&lt;/head&gt;

&lt;body&gt;
&lt;!--left--&gt;
&lt;div  class="widget-place column1"&gt;
&lt;div  class="widget movable"&gt;
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div  class="widget-content"&gt;left-----Drag with the mouse&lt;/div&gt; 
&lt;/div&gt;

&lt;div  class="widget movable"&gt;
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div  class="widget-content"&gt;left-----Drag with the mouse&lt;/div&gt;
&lt;/div&gt;
&lt;div  class="widget movable"&gt;
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div  class="widget-content"&gt;left-----Drag with the mouse&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;!--middle--&gt;
&lt;div  class="widget-place column2"&gt; 
&lt;div  class="widget movable collapsable removable editable"&gt;
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">This is the content of the editing. In order to be conspicuous, I added a background</div>&lt;div  class="widget-content"&gt;middle------Drag with the mouse&lt;/div&gt;
&lt;/div&gt;
&lt;div  class="widget movable removable editable"&gt;
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div  class="widget-content"&gt;middle------Drag with the mouse&lt;/div&gt;
&lt;/div&gt;
&lt;div  class="widget movable removable editable"&gt;
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div  class="widget-content"&gt;middle------Drag with the mouse&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;!--right--&gt;
&lt;div  class="widget-place column3"&gt;
&lt;div  class="widget movable"&gt; 
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div  class="widget-content"&gt;right------Drag with the mouse&lt;/div&gt;
&lt;/div&gt;
&lt;div  class="widget movable"&gt;
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div  class="widget-content"&gt;right------Drag with the mouse&lt;/div&gt;
&lt;/div&gt;
&lt;div  class="widget movable"&gt;
&lt;div  class="widget-header"&gt;&lt;strong&gt;drar me&lt;/strong&gt; &lt;/div&gt;
&lt;div  class="widget-content"&gt;right------Drag with the mouse&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

CSS

body{
margin: 0;
padding: 0;
background-color: silver;
font-family: 'Lucida Grande','Lucida Sans Unicode','Song style','New Song',arial,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;
background-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: white;
}
#middle .widget .widget-header {
width: 360px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-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: white;
}
#right .widget .widget-header {
width: 340px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}

javascript code

$(document).ready(function(){ 
$.({
i18n : { 
editText : 'edit', 
closeText : 'closure', 
extendText : 'Expand', 
collapseText : 'fold', 
cancelEditText : 'Cancel' 
}
});
});