google个性化主页拖拽实现修正版本

最新推荐文章于 2024-02-21 22:57:34 发布
最新推荐文章于 2024-02-21 22:57:34 发布 · 46 阅读 · 0
本文介绍了一个Google个性化主页的拖拽功能实现方案，包括拖拽模块的交互设计及其实现代码。通过使用JavaScript，实现了模块拖动、读取RSS等功能。

google个性化主页拖拽实现修正版本

忙了两个月的时间.又可以做自己的工作了.上次写的还有很多问题.改进..并完成了读取rss的动作.保存用户信息等功能
js主要由几个部分组成:
1.drag.js:负责拖动的事件
2.dom.js:负责拖动过程中页面节点的变化
3.request.js:主要是读取rss响应的工作


下面是drag.js的部分代码:

drag.js的全部代码
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->1/**//*
2**************************************
3*AuthorByBlackSoul*
4*2006-08-05*
5*BlackSoulylk@gmail.com*
6*QQ:9136194*
7*http://blacksoul.cnblogs.cn*
8**************************************
9*/
10vartx,ty;
11varstepX,stepY;
12
13//检查位置
14varaim,module;
15
16/**//*-----调用函数之前需要初始化aim为当前模块-----//
17*varmodules=[1,2,3,4,5,6];
18*其中数字代表模块id号.
19*主要位置div从左到右为"left","center","right"
20*页面当中模块名称为m_1,m_2,m_3.
21*/
22
23functiondrag(parent,handle){
24varclone,isNew=false;
25varparentName=parent.getAttribute('id');
26parent.firstChild.onmousedown=function(){returnfalse;};
27handle.onselectstart=function(){returnfalse;};
28handle.onmousedown=function(a){
29aim=parent;
30varnewDiv=document.createElement("div");
31newDiv.setAttribute('id','clone');
32newDiv.style.display="none";
33document.body.appendChild(newDiv);
34clone=document.getElementById("clone");
35
36clone.style.width=300;
37clone.style.display="none";
38clone.style.position="absolute";
39clone.innerHTML=parent.innerHTML;
40
41clone.style.zIndex=10000;
42clone.style.filter="alpha(opacity=70)";//iehack
43clone.style.opacity=0.75;
44
45vard=document;if(!a)a=window.event;
46varx=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
47
48if(parent.setCapture)
49parent.setCapture();
50elseif(window.captureEvents)
51window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
52
53d.onmousemove=function(a){
54parent=document.getElementById(parent.getAttribute('id'));
55if(!a)a=window.event;
56if(!a.pageX)a.pageX=a.clientX;
57if(!a.pageY)a.pageY=a.clientY;
58tx=a.pageX-x-document.body.scrollLeft,ty=a.pageY-y+document.body.scrollTop;
59
60clone.style.left=tx;
61clone.style.top=ty;
62clone.style.display="block";
63
64varaimLeft=aim.parentNode.offsetLeft;
65varaimRight=aim.parentNode.offsetLeft+aim.offsetWidth;
66varaimTop=aim.parentNode.offsetTop+aim.offsetTop-document.body.scrollTop;
67varaimbottom=aim.parentNode.offsetTop+aim.offsetTop+aim.offsetHeight-document.body.scrollTop;
68
69//这里检测处于目标当中则处理事件
70if(a.pageX>=aimLeft&&a.pageX<=aimRight
71&&a.pageY>=aimTop&&a.pageY<=aimbottom)
72{//处于当前块当中
73
74appendAfter(aim.getAttribute('id'),parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
75document.getElementById("Move_"+parent.getAttribute('id')).style.border="2pxdashed#cc2244";
76deleteNode(parent.getAttribute('id'));
77document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
78aim=document.getElementById(parent.getAttribute('id'));
79return;
80
81}
82else
83{//否则检测属于哪个模块
84for(vari=0;i<modules.length;i++)
85{
86module=document.getElementById("m_"+modules[i]);
87if(a.pageX>=module.parentNode.offsetLeft&&a.pageX<=(module.parentNode.offsetLeft+module.offsetWidth)
88&&a.pageY>=(module.parentNode.offsetTop+module.offsetTop-document.body.scrollTop)&&a.pageY<=(module.parentNode.offsetTop+module.offsetTop+module.offsetHeight-document.body.scrollTop))
89{//处于当前块当中
90appendBefore(module.getAttribute('id'),parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
91document.getElementById("Move_"+parent.getAttribute('id')).style.border="2pxdashed#cc2244";
92deleteNode(parent.getAttribute('id'));
93document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
94aim=module;
95return;
96}
97}
98
99//不属于任何一个位置,属于当前区域之外
100varleft=document.getElementById("left");
101varcenter=document.getElementById("center");
102varright=document.getElementById("right");
103
104//左右属于left上下不属于left
105if(a.pageX>=left.offsetLeft&&a.pageX<=(left.offsetLeft+left.offsetWidth)
106&&a.pageY>=(left.offsetTop+left.offsetHeight+document.body.scrollTop))
107{
108appendLast("left",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
109document.getElementById("Move_"+parent.getAttribute('id')).style.border="2pxdashed#cc2244";
110deleteNode(parent.getAttribute('id'));
111document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
112aim=document.getElementById(parent.getAttribute('id'));
113return;
114}
115
116if(a.pageX>=left.offsetLeft&&a.pageX<=(left.offsetLeft+left.offsetWidth)
117&&a.pageY<=left.offsetTop+document.body.scrollTop)
118{
119appendFirst("left",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
120document.getElementById("Move_"+parent.getAttribute('id')).style.border="2pxdashed#cc2244";
121deleteNode(parent.getAttribute('id'));
122document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
123aim=document.getElementById(parent.getAttribute('id'));
124return;
125}
126
127//左右属于center上不属于center
128if(a.pageX>=center.offsetLeft&&a.pageX<=(center.offsetLeft+center.offsetWidth)
129&&a.pageY>=(center.offsetTop+center.offsetHeight+document.body.scrollTop))
130{
131appendLast("center",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
132document.getElementById("Move_"+parent.getAttribute('id')).style.border="2pxdashed#cc2244";
133deleteNode(parent.getAttribute('id'));
134document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
135aim=document.getElementById(parent.getAttribute('id'));
136return;
137}
138
139if(a.pageX>=center.offsetLeft&&a.pageX<=(center.offsetLeft+center.offsetWidth)
140&&a.pageY<=center.offsetTop+document.body.scrollTop)
141{
142appendFirst("center",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
143document.getElementById("Move_"+parent.getAttribute('id')).style.border="2pxdashed#cc2244";
144deleteNode(parent.getAttribute('id'));
145document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
146aim=document.getElementById(parent.getAttribute('id'));
147return;
148}
149
150//左右属于right上不属于right
151if(a.pageX>=right.offsetLeft&&a.pageX<=(right.offsetLeft+right.offsetWidth)
152&&a.pageY>=(right.offsetTop+right.offsetHeight+document.body.scrollTop))
153{
154appendLast("right",parent.getAttribute('id'),"Move_"
标签
#Google #QQ #Gmail #工作
wapysun
关注
DOS命令-时间戳和日期相互转换
ssk0411的博客
08-14 3772
文章目录获取当前日期获取当前时间戳DOS命令执行bat批处理执行获取几天前时间戳DOS命令执行bat批处理执行时间戳转换日期DOS命令执行bat批处理执行日期转换时间戳DOS命令执行bat批处理执行 获取当前日期 Set dt=%Date:~0,4%%Date:~5,2%%Date:~8,2% Echo %dt% 获取当前时间戳 DOS命令执行 set "$=%temp%\Spring" >%$% Echo WScript.Echo((new Date()).getTime()) for /f
【超详细】HIVE 日期函数（当前日期、时间戳转换、前一天日期等）
ymzhu385的博客
02-21 9982
【超详细】HIVE 日期函数（当前日期、时间戳转换、前一天日期等） 常量：当前日期、时间戳前一天日期、后一天日期 获取日期中的年、季度、月、周、日、小时、分、秒等 时间戳转换 秒 to 时间戳 时间戳 to 秒 日期 to 时间戳 日期之间月、天数差
Dos 查看日期加时间
iteye_4972的博客
04-07 550
echo %data% %time%   我用:echo   %date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%   时间域 %   H   小时（00..23） %   I   小时（01..12） %   k   小时（0..23）   %   l   小时（1..12） %   M   分（00..59） %   p   显示...
DOS日期和时间
fjjjyf的博客
01-14 656
DOS日期和时间
DOS命令输出时间日期到文本文件
weixin_52488303的博客
02-04 1504
DOS命令获取当前时间和日期
汇编语言--常用DOS功能
海到无边天作岸 山登绝顶我为峰
09-20 1万+
常用的DOS功能调用 1．键盘输入并显示（1号功能调用） 格式： MOV AH, 01H INT 21H 功能：按下任何键，将其对应字符的ASCII码送入AL中，并在屏幕上显示该字符。如果按下的是Ctrl＋Break组合键，则终止程序执行。1号功能调用无须入口参数，出口参数在AL中 2．键盘输入但不显示输入字符（8号功能调用） 格式： MOV AH, 08H INT ...
【Windows】Dos中的日期的和时间
weixin_33923148的博客
04-25 2972
在Dos中，我们可以通过动态变量DATE来取得当前日期，通过动态变量TIME来取得当前日期。实例1 C:\Users\hubin5&gt;echo %date% 2013/03/11 周一 C:\Users\hubin5&gt;echo %time% 13:42:24.29 实例2： set no=%Date:~0,4%%Date:~5,2%%Date:~8,2%%Ti...
查看运行时间_电脑怎么查看系统安装日期及系统运行时间的方法
weixin_39688451的博客
01-15 1570
很多用户对于自己的电脑系统是什么时候安装的都不记得，特别是在使用他人的电脑时，如果你感觉电脑运行速度很慢，多半是系统垃圾文件太多，软件更新导致。有用户反馈5年都没重装过自己的电脑系统，因此电脑运行速度很慢，这其中电脑老化淘汰是一部分原因，主要还是跟系统有关。系统运行速度慢，安装软件比较多，卸载的时候又怕出现问题，如垃圾清理不干净或误删程序。此时需要查看自己的电脑系统安装时间，如果年限已久，建议重装...
Windows DOS窗口查看历史执行过的命令的三种方式
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
02-21 2万+
在DOS窗口执行了一些列命令完成某项工作后，如果要查看都执行了那些命令，该如何办呢？（前提：DOS窗口未关闭的情况下） 一、方法一：使用↑↓箭头上下翻看执行过的命令，此方式适宜执行命令较少的情况； 二、方法二：使用快捷键； F7快捷键查看所有执行过的命令 F3：调出上一条执行过的命令，调出后直接回车即可执行； F8：搜索命令历史记录，和↑向上箭头类似。 F9：按编号选择命令，来调出执行...
使用DOS维护系统 （显示时间和日期）
~鹏鹏在努力~
03-11 1165
DOS提供两个常见的内部命令：time和date这两个命令能显示当前系统的时间和日期，由于它是内部命令，可以在盘符后直接输入命令即可。 1.例如：想查看当前系统的时间，课直接输入time后按Enter。DOS就会告诉你现在系统的时间，并且可以修改，如果不许要修改就可以直接按Enter。 2.例如想查看现在系统的时间可以输入date后按回车键，DOS就会告诉你现在系统的日期，如果需要修改
获取系统时间的DOS命令
码农
12-24 1万+
http://hi.baidu.com/pesthole/blog/item/3a4deade5c488a5594ee3781.html DOS C:\Users\yaozhendong>echo %date:~0,10% %time% 2011/12/24 19:45:41.25 前段时间工作中需要对一个地址做定时PING操作，并将结果输出到TXT文件中，为此做了个批处理文件，用到了获取
windows dos 下用批处理计算N天前的日期或者N天前后的日期
征客
07-29 2359
摘自：http://diandian.iteye.com/blog/684630 @echo off setlocal enabledelayedexpansion ::::::::::::::::::::::::::::::::::::::::::::::::::: :: DOS下用批处理计算N天前的日期或者N天前后的日期 :: :: 2k、xp、2003、win7下测试通过 ...
计算机日期的格式化,dos 日期时间格式设置使用小结(Date和Time)
weixin_31857829的博客
07-23 1636
复制代码 代码如下:@echo off@title 字符串的编辑测试(下面描述用的箭头→ ← 分别表示向右、向左的意思)set aa=1234567890echo 说明:下面复合变量中,逗号前的数字表示指针偏移量,逗号后的数字表示提取的字符长度echo %aa:~1,5% //指针向右→偏移1位,然后从指针处开始向右→提取5个字符.echo %aa:~0,-3% //指针不偏移,→提取所有字符,并...
spark日期时间处理
盛源的博客
07-25 1万+
标准日期格式符号: yyyy-MM-dd HH:mm:ss、yyyy-M-ddTHH:mm:ss。'२०२४-१०-१९ ०५:१६:०५' 转换到 '2024-10-19 05:16:05'前端显示date、time类型的时候，有可能收时区的影响，为了避免不必要的麻烦可存成字符串；1. 函数性能，选择高性能方式或函数。从指定格式的时间转换到Unix时间。2) 这种特定时间戳格式受时区影响。这两个函数从官方文档看是相同的;第一个参数必须是标准格式的时间。第一个参数是10位的时间戳。
一般dos命令
weixin_30607029的博客
07-15 116
在本机查看已被占用的post（端口） 的dos命令 ：：在网上查了下，用一条dos命令就可以测试本机的所有端口使用情况，首先打开cmd模拟dos，输入：netstat -abn 用DOS，可别不知道DOS在哪里运行，有好几种方法 1.开始菜单---程序---附件---命令提示符 2.开始菜单---运行---打命令CMD 一、常用DOS命令 (1)cd.. cd.. 退到次一级目录 c...
Windows DOS内部命令详解04——del、ren、cls、ver、date、time
海渊_haiyuan的博客
04-15 1万+
前言即上文书说到，DOS内部命令中常用命令已经快介绍完毕了。del命令在DOS中要删除文件，使用del命令。语法del <文件名全称>/p把指定的一个或一类文件从磁盘目录中删除，原文件所占用的磁盘空间被释放为可利用空间。/p加该参数后，在删除文件之前等待用于确认。说明删除后系统无返回信息，只有这样才是成功删除。如果所指定的文件不存在，则系统显示：file not found. 如果在<文件名全称>
dos 命令集1---DOS 概述及入门
braddoris的专栏
06-01 1240
DOS 概述及入门　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——DOS简介　 　　现在家用电脑的操作系统大多都是用的 Windows 95，但在1995年Windows 95推出以前，占统治地位的操作系统是DOS(Disk Operation System 磁盘操作系统)。 　　接触电脑早一点的人想必都听说过DOS的大名，更有很多人到今天仍然对DOS时代怀念不已，
Windows学习总结（8）——DOS窗口查看历史执行过的命令的三种方式
weixin_33994444的博客
11-09 2087
在DOS窗口执行了一些列命令完成某项工作后，如果要查看都执行了那些命令，该如何办呢？（前提：DOS窗口未关闭的情况下） 一、方法一： 使用↑↓箭头上下翻看执行过的命令，此方式适宜执行命令较少的情况。 二、方法二：使用快捷键 F7快捷键查看所有执行过的命令 F3：调出上一条执行过的命令，调出后直接回车即可执行； F8：搜索命令历史记录，和↑向上箭头类似。 F9：按编号选择命令，...
Python 日期时间datetime 加一天，减一天 等计算
weixin_43513980的博客
09-20 3637
可以把days改为hours minutes，就可以提前XX小时/分钟了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值