Jquery仿IGoogle实现可拖动窗口示例代码_jquery

google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天要做一个网站的类似效果，仿照iGoogle做了一个简单的小demo。

这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。

废话就不多说了，直接把源代码贴出来，让大家学习！
html

 







drar me 
左边-----用鼠标拖动
 




drar me 
左边-----用鼠标拖动



drar me 
左边-----用鼠标拖动




 


drar me 
这里就是放编辑的内容,为了显眼，我加了背景
中间------用鼠标拖动



drar me 
中间------用鼠标拖动



drar me 
中间------用鼠标拖动





 

drar me 
右边------用鼠标拖动



drar me 
右边------用鼠标拖动



drar me 
右边------用鼠标拖动

CSS

body{
margin: 0;
padding: 0;
background-color: silver;
font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',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代码

$(document).ready(function(){ 
$.fn.EasyWidgets({
i18n : { 
editText : '编辑', 
closeText : '关闭', 
extendText : '展开', 
collapseText : '折叠', 
cancelEditText : '取消' 
}
});
});