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
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实现可拖动窗口（源码）的更多相关文章
- Jquery仿IGoogle实现可拖动窗口
google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,与编程人生的站长沟通了一下,仿照iG ...
- Bootstrap 模态窗口源码分析
前言: bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上, 300来行的代码,其 ...
- 高仿it之家新闻客户端源码
仿it之家新闻客户端界面,数据为本地假数据.仅实现了新闻模块的功能. 源码下载:http://code.662p.com/list/11_1.html 详细说明:http://android.662p ...
- 高仿ios版美团框架项目源码
高仿美团框架基本已搭好.代码简单易懂,适合新人.适合新人.新人. <ignore_js_op> 源码你可以到ios教程网那里下载吧,这里我就不上传了,http://ios.662p ...
- jQuery原型方法first,last,eq,slice源码分析
这4个方法中前3个方法很常用大家都见过,但是slice方法可能会以为是数组方法,其实slice也是jQuery的一个原型方法,只不过是底层方法是为其他方法服务的(更具体点是为eq方法服务的),首先还是 ...
- jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析
首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些? init方法作为实际的构造函数已经详细分析过了,需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492 ...
- 高仿一元云购IOS应用源码项目
高仿一元云购IOS应用(高仿自一元云购安卓客户端) 本App因官方没有IOS客户端故开发,利用业务时间历时2个星期,终于开发完成,又因苹果的各大审核规则对此App的影响,又历时1个多月才终于成功上架, ...
- jQuery超炫酷按钮插件及源码
现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...
- 高仿百度传课应用客户端源码iOS版
高仿百度传课iOS版,版本号:2.4.1.2 运行环境:xcode6.3 ios8.3 (再往上系统没有测试) 转载请注明出处,不可用于商业用途及不合法用途. 如果你觉得不错,欢迎 star 哦 ...
随机推荐
- PO_已交货PO进行退货（流程）
2014-06-04 Created By BaoXinjian
- java 实现万年历
曾经初学java写万年历,都是採用主要的算法求出是否闰年闰月 计算公式例如以下 int year = 2014, month = 8, total = 0; if (month == 1 || mon ...
- Python splitlines()方法
描述 Python splitlines() 按照行界符('\r', '\r\n', \n'等)分隔,返回一个包含各行作为元素的列表,默认不包含行界符. 能被识别的行界符: 行界符 描述 \n Lin ...
- 如何在virtualenv虚拟环境中安装mysql-python
接触过virtualenv后,想在这个虚拟环境中安装独立的开发环境.在安装MySQLdb时遇到错误 pc 09:09:30 File "/home/pc/work/VENV/py3/loca ...
- 关于TCP/IP与数据传输
一.TCP/IP的具体含义: 从字面意思来讲,很多人会认为TCP/IP是指TCP与IP这两种协议.有时确实也可以说是这两种协议,但是大部分情况下所说的是利用IP进行通信时所必须用到的协议群的统称.具体 ...
- Linux中Nginx安装与配置详解 test（待整理 补全）
http://www.linuxidc.com/Linux/2016-08/134110.htm http://www.cnblogs.com/freeweb/p/5425554.html http: ...
- Java：多线程，线程池，用Executors静态工厂生成常用线程池
一: newSingleThreadExecutor 创建一个单线程的线程池,以无界队列方式运行.这个线程池只有一个线程在工作(如果这个唯一的线程因为异常结束,那么会有一个新的线程来替代它.)此线程池 ...
- JBoss DataGrid的集群部署与訪问
集群部署 JDG的缓存模式包含本地(Local)模式和集群(Clustered)模式.本项目採用多节点的Clustered模式部署.数据在多个节点的子集间进行复制.而不是同步拷贝到全部的节点. 使用子 ...
- java.net.DatagramPacket/java.net.DatagramSocket-UDP Socket编程
UDP 的 Java 支持 UDP 协议提供的服务不同于 TCP 协议的端到端服务,它是面向非连接的,属不可靠协议,UDP 套接字在使用前不需要进行连接.实际上,UDP 协议只实现了两个功能: 在 I ...
- SQL server插入数据后,如何获取自增长字段的值？
insert into Tb_People(uname,era,amount) values( '兆周','老年','10000') select @@identity --当运行完插入语句后,执行s ...