Jquery仿IGoogle实现可拖动窗口（源码）
2024-06-07 13:34:52
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>
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 }
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 : '取消'
}
});
});
$.fn.EasyWidgets({
i18n : {
editText : '编辑',
closeText : '关闭',
extendText : '展开',
collapseText : '折叠',
cancelEditText : '取消'
}
});
});
毕竟是一个测试的例子，我的目标就是会用就可以了，因为自己的css不太好，所以效果挺恶心的！不过功能实现了，但是再拖动的时候，div会有晃动，不知道咋解决！！最后贴一张效果图：拖动前：
拖动后：
Jquery仿IGoogle实现可拖动窗口（源码）相关推荐
- 网狐二次开发仿爱玩棋牌三网通源码全套安装源码下载
网狐二次开发仿爱玩棋牌三网通源码全套安装源码安装过程: 0. 环境 OS:Windows 10,64 bit: 显卡:NVIDIA GeForce GTX 1050Ti,显卡查看方法:计算机[设备管理 ...
- 畅玩mt3单机游戏服务器维护,【梦幻西游】MT3仿端手工游戏服务端源码[教程+授权物品后台]...
[梦幻西游]MT3仿端手工游戏服务端源码[教程+授权物品后台] 架设教程 系统:CentOS 6.8 64位 1.关闭防火墙 chkconfig iptables off service iptab ...
- java简单计算器课程设计_java仿windows简易计算器课程设计 源码+报告
[实例简介] java仿windows简易计算器课程设计 源码+报告 课直接运行. [实例截图] [核心代码] Java课设-简易计算器 └── Java课设-简易计算器 ├── Java课程设计.d ...
- thinkPHP仿QQ飞车手游模拟抽奖源码
介绍: thinkPHP仿QQ飞车手游模拟抽奖源码,用途很简单,就是看看你投入多少钱能抽到. 使用方法: 下载源码,上传解压到你的服务器或者主机里面. 由于本程序是thinkPHP开发的,所以需要配置 ...
- 仿IOS介绍APP下载页源码
简介: 仿IOS介绍APP下载页源码 网盘下载地址: http://kekewangLuo.cc/etChSUGbyoU0 图片:
- 2022高仿twitter社区推特PHP源码修复版
2022高仿twitter社区源码推特PHP源码修复版搭建教程 安装环境: Nginx + PHP7.2 + MYSQL 安装配置: 1.上传源码到网站根目录 2.导入数据库文件 sql.sql 3. ...
- H5版仿制微信跳一跳小游戏，网页版仿微信跳一跳小游戏源码，实现了跳一跳的基本核心功能
H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码,实现了跳一跳的基本核心功能 完整代码下载地址:H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码 运行截图 Project setup ...
- 仿“真心祝福你”微信小程序源码
类似真心祝福你的小程序目前太火了,完全是靠别人转发带来的流量.我也是偶然从数据平台排行榜发现,社交类排名前几的竟然都是送祝福之类的小程序,而且都是大同小异,互相抄而且流量依然很可观,于是我也花时间做了 ...
- 助创cms众筹 php,助创cms汽车众筹系统：仿车车车汽车众筹源码程序
原标题:助创cms汽车众筹系统:仿车车车汽车众筹源码程序 汽车众筹近两年逐渐被越来越多的人熟知,越来越多的二手汽车众筹平台相继出现,这个市场的活跃度甚至呈现几何倍数增长,要问原因,不得不提它的三大特色 ...
- 苹果CMS V10仿韩剧TV主题模板源码 | 苹果CMS主题
简介: 苹果CMS V10仿韩剧TV主题模板源码 | 苹果CMS主题 设置说明: 1.首页幻灯片推荐5,幻灯片尺寸:420×248 2.首页幻灯片旁边8个视频推荐1均可 3.频道页幻灯片如上,推荐5幻 ...
最新文章
- C++ 对引用的深入理解
- [AlwaysOn Availability Groups]AlwaysOn健康诊断日志
- hub设备_USB不够用，一个HUB全部搞定！ORICO 群控USB扩展器
- map.js的编写（js编写一个对象的方式）
- mysql 不停机_mysql之 mysql 5.6不停机主从搭建（一主一从基于日志点复制）
- YbtOJ#791-子集最值【三维偏序】
- linux mint安装步骤,Linux mint 安装步骤
- 淮海工学院大一c语言期中试题,《C语言程序设计》期中考试试卷
- python声音捕获_在Python中实现实时信号处理如何连续捕获音频？
- POJ 1703 Find them, Catch them(路径压缩并查集)
- 【Webcam设计】MJPG编码和AVI封装
- 图解机器学习—算法原理与Python语言实现（文末留言送书）
- 李沐等人提出UN-EPT：用于语义分割的统一高效金字塔Transformer
- 鸿图之下服务器维护10月25,鸿图之下11月25日维护更新公告
- UR机器人(5)-使用变量
- Mybatis Plus最新代码生成器AutoGenerator，更简单更高效！
- 家暴屡教不改能判刑吗
- Celery 动态添加定时任务生产实践
- iphone4 美版电信烧号6.1.3电话号码括号问题解决办法
- JBPM（二）---JBPM工作流基本操作
热门文章
- 关于用c语言演奏《天空之城》那些事
- linux 复制文件加后缀,linux shell 取文件名后缀
- python进阶练习题:第一步，成为百万富翁 - 汇率卡塔【难度：2级】--景越Python编程实例训练营,不同难度Python习题，适合自学Python的新手进阶
- 一招教你电脑微信双开
- dw编写手机版html,手机移动网页制作：用
- 故障树手册（Fault Tree handbook)（3）
- Java Review（三十三、异常处理----补充：断言、日志、调试）
- c语言中罗马字母数字,C语言程序经典示例—-（22）阿拉伯数字转换为罗马数字...
- android h5 唤醒微信,H5唤醒App，用通用连接解决在微信打开APP的问题
- 野火Linux内核,ebf_6ull_linux