Jquery仿iGoogle实现可拖动窗口（源码）

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

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

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

html

1 < html >
2 < head >
3 < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " />
4
5 < link rel = " stylesheet " type = " text/css " media = " screen " href = " css/my.css " mce_href = " css/my.css " />
6 < mce:script type = " text/javascript " src = " js/jquery.min.js " mce_src = " js/jquery.min.js " ></ mce:script >
7 < mce:script type = " text/javascript " src = " js/jquery-ui.min.js " mce_src = " js/jquery-ui.min.js " ></ mce:script >
8 < mce:script type = " text/javascript " src = " js/jquery.easywidgets.js " mce_src = " js/jquery.easywidgets.js " ></ mce:script >
9 < mce:script src = " js/example.js " mce_src = " js/example.js " type = " text/javascript " ></ mce:script >
10 </ head >
11
12 < body >
13 <!-- left -->
14 < div id = " left " class = " widget-place column1 " >
15 < div id = " ldiv1 " class = " widget movable " >
16 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
17 < div id = " content " class = " widget-content " > 左边 ----- 用鼠标拖动 </ div >
18 </ div >
19
20 < div id = " ldiv2 " class = " widget movable " >
21 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
22 < div id = " content " class = " widget-content " > 左边 ----- 用鼠标拖动 </ div >
23 </ div >
24 < div id = " ldiv3 " class = " widget movable " >
25 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
26 < div id = " content " class = " widget-content " > 左边 ----- 用鼠标拖动 </ div >
27 </ div >
28 </ div >
29
30 <!-- middle -->
31 < div id = " middle " class = " widget-place column2 " >
32 < div id = " mdiv1 " class = " widget movable collapsable removable editable " >
33 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
34 < div class = " widget-editbox " style = " background:#CC6699 " mce_style = " background:#CC6699 " > 这里就是放编辑的内容,为了显眼，我加了背景 </ div >
35 < div id = " content " class = " widget-content " > 中间 ------ 用鼠标拖动 </ div >
36 </ div >
37 < div id = " mdiv2 " class = " widget movable removable editable " >
38 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
39 < div id = " content " class = " widget-content " > 中间 ------ 用鼠标拖动 </ div >
40 </ div >
41 < div id = " mdiv3 " class = " widget movable removable editable " >
42 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
43 < div id = " content " class = " widget-content " > 中间 ------ 用鼠标拖动 </ div >
44 </ div >
45 </ div >
46
47 <!-- right -->
48 < div id = " right " class = " widget-place column3 " >
49 < div id = " rdiv1 " class = " widget movable " >
50 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
51 < div id = " content " class = " widget-content " > 右边 ------ 用鼠标拖动 </ div >
52 </ div >
53 < div id = " rdiv2 " class = " widget movable " >
54 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
55 < div id = " content " class = " widget-content " > 右边 ------ 用鼠标拖动 </ div >
56 </ div >
57 < div id = " rdiv3 " class = " widget movable " >
58 < div id = " header " class = " widget-header " >< strong > drar me </ strong > </ div >
59 < div id = " content " class = " widget-content " > 右边 ------ 用鼠标拖动 </ div >
60 </ div >
61 </ div >
62 </ body >
63 </ html >

css

1 body{
2 margin: 0 ;
3 padding: 0 ;
4 background - color: silver;
5 font - family: ' Lucida Grande ' , ' Lucida Sans Unicode ' , ' 宋体 ' , ' 新宋体 ' ,arial,verdana,sans - serif;
6 color: # 666 ;
7 font - size:20px;
8 line - height: 150 % ;
9 }
10 #left{
11 width: 380px;
12 height: 100 % ;
13 padding: 10px;
14 position: absolute;
15 top: 10px;
16 left: 10px;
17 border: solid red 2px;
18 }
19 #left .widget {
20 width: 340px;
21 height: 150px;
22 padding; 10px;
23 margin: 20px;
24 border: solid red 2px;
25 background - color: white;
26 }
27 #left .widget .widget - header {
28 width: 340px;
29 height: 30px;
30 padding: 0 ;
31 margin: 0 ;
32 color: red;
33 position: static ;
34 background - color: gray;
35 }
36 #middle{
37 width: 400px;
38 height: 100 % ;
39 position: absolute;
40 top:10px;
41 left: 435px;
42 padding: 10px;
43 margin: 0 30px 0 ;
44
45 border: solid red 2px;
46 }
47 #middle .widget {
48 width: 360px;
49 height: 150px;
50 padding; 10px;
51 margin: 20px;
52 border: solid red 2px;
53 background - color: white;
54 }
55 #middle .widget .widget - header {
56 width: 360px;
57 height: 30px;
58 padding: 0 ;
59 margin: 0 ;
60 color: red;
61 position: static ;
62 background - color: gray;
63 }
64 #right{
65 width: 380px;
66 height: 100 % ;
67 padding: 10px;
68 position: absolute;
69 top: 10px;
70 right: 10px;
71 border: solid red 2px;
72 }
73 #right .widget {
74 width: 340px;
75 height: 150px;
76 padding; 10px;
77 margin: 20px;
78 border: solid red 2px;
79 background - color: white;
80 }
81 #right .widget .widget - header {
82 width: 340px;
83 height: 30px;
84 padding: 0 ;
85 margin: 0 ;
86 color: red;
87 position: static ;
88 background - color: gray;
89 }

js

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

      毕竟是一个测试的例子，我的目标就是会用就可以了，因为自己的css不太好，所以效果挺恶心的！不过功能实现了，但是再拖动的时候，div会有晃动，不知道咋解决！！最后贴一张效果图：拖动前：

拖动后：

转载于:https://www.cnblogs.com/focusj/archive/2011/04/16/2057583.html