首页 > 代码库 > Jquery仿IGoogle实现可拖动窗口（源码）

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

2024-07-26 10:28:24   220人阅读

  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="http://www.mamicode.com/css/my.css" mce_href="http://www.mamicode.com/css/my.css" />
6 <mce:script type="text/javascript" src="http://www.mamicode.com/js/jquery.min.js" mce_src="http://www.mamicode.com/js/jquery.min.js"></mce:script>
7 <mce:script type="text/javascript" src="http://www.mamicode.com/js/jquery-ui.min.js" mce_src="http://www.mamicode.com/js/jquery-ui.min.js"></mce:script>
8 <mce:script type="text/javascript" src="http://www.mamicode.com/js/jquery.easywidgets.js" mce_src="http://www.mamicode.com/js/jquery.easywidgets.js"></mce:script> 
9 <mce:script src="http://www.mamicode.com/js/example.js" mce_src="http://www.mamicode.com/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 
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 
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 
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 
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 
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 
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 
89 }


js

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


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

拖动后：

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


联系
我们