google个性主页的拖拽效果
作者:journey 日期:2009-05-29
JS代码:
程序代码
// 工具类,使用Util的命名空间,方便管理
var Util = new Object();
// 获取http header里面的UserAgent,浏览器信息
Util.getUserAgent = navigator.userAgent;
// 是否是Gecko核心的Browser,比如Mozila、Firefox
Util.isGecko = Util.getUserAgent.indexOf( " Gecko " ) != - 1 ;
// 是否是Opera
Util.isOpera = Util.getUserAgent.indexOf( " Opera " ) != - 1 ;
// 获取一个element的offset信息,其实就是相对于Body的padding以内的绝对坐标
// 后面一个参数如果是true则获取offsetLeft,false则是offsetTop
// 关于offset、style、client等坐标的定义参考dindin的这个帖子:http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
Util.getOffset = function (el, isLeft) {
var retValue = 0 ;
while (el != null ) {
retValue += el[ " offset " + (isLeft ? " Left " : " Top " )];
el = el.offsetParent;
}
return retValue;
};
// 将一个function(参数中的funcName是这个fuction的名字)绑定到一个element上,并且以这个element的上下文运行,其实是一种继承,这个可以google些文章看看
Util.bindFunction = function (el, fucName) {
return function () {
return el[fucName].apply(el, arguments);
};
};
// 重新计算所有的可以拖拽的element的坐标,对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标,防止遮叠
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff = function (el) {
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
ele.elm.pagePosLeft = Util.getOffset(ele.elm, true );
ele.elm.pagePosTop = Util.getOffset(ele.elm, false );
}
var nextSib = el.elm.nextSibling;
while (nextSib) {
nextSib.pagePosTop -= el.elm.offsetHeight;
nextSib = nextSib.nextSibling;
}
};
// 隐藏Google Ig中间那个table,也就是拖拽的容器,配合show一般就是刷新用,解决一些浏览器的怪癖
Util.hide = function () {
Util.rootElement.style.display = " none " ;
};
// 显示Google Ig中间那个table,解释同上
Util.show = function () {
Util.rootElement.style.display = "" ;
};
// 移动时显示的占位虚线框
ghostElement = null ;
// 获取这个虚线框,通过dom动态生成
getGhostElement = function () {
if ( ! ghostElement) {
ghostElement = document.createElement( " DIV " );
ghostElement.className = " modbox " ;
ghostElement.backgroundColor = "" ;
ghostElement.style.border = " 2px dashed #aaa " ;
ghostElement.innerHTML = " " ;
}
return ghostElement;
};
// 初始化可以拖拽的Element的函数,与拖拽无关的我去掉了
function draggable(el) {
// 公用的开始拖拽的函数
this ._dragStart = start_Drag;
// 公用的正在拖拽的函数
this ._drag = when_Drag;
// 公用的拖拽结束的函数
this ._dragEnd = end_Drag;
// 这个函数主要用来进行拖拽结束后的dom处理
this ._afterDrag = after_Drag;
// 是否正在被拖动,一开始当然没有被拖动
this .isDragging = false ;
// 将这个Element的this指针注册在elm这个变量里面,方便在自己的上下文以外调用自己的函数等,很常用的方法
this .elm = el;
// 触发拖拽的Element,在这里就是这个div上显示标题的那个div
this .header = document.getElementById(el.id + " _h " );
// 对于有iframe的element拖拽不同,这里检测一下并记录
this .hasIFrame = this .elm.getElementsByTagName( " IFRAME " ).length > 0 ;
// 如果找到了header就绑定drag相关的event
if ( this .header) {
// 拖拽时的叉子鼠标指针
this .header.style.cursor = " move " ;
// 将函数绑定到header和element的this上,参照那个函数的说明
Drag.init( this .header, this .elm);
// 下面三个语句将写好的三个函数绑定给这个elemnt的三个函数钩子上,也就实现了element从draggable继承可拖拽的函数
this .elm.onDragStart = Util.bindFunction( this , " _dragStart " );
this .elm.onDrag = Util.bindFunction( this , " _drag " );
this .elm.onDragEnd = Util.bindFunction( this , " _dragEnd " );
}
};
// 下面就是draggable里面用到的那4个function
// 公用的开始拖拽的函数
function start_Drag() {
// 重置坐标,实现拖拽以后自己的位置马上会被填充的效果
Util.re_calcOff( this );
// 记录原先的邻居节点,用来对比是否被移动到新的位置
this .origNextSibling = this .elm.nextSibling;
// 获取移动的时候那个灰色的虚线框
var _ghostElement = getGhostElement();
// 获取正在移动的这个对象的高度
var offH = this .elm.offsetHeight;
if (Util.isGecko) {
// 修正gecko引擎的怪癖吧
offH -= parseInt(_ghostElement.style.borderTopWidth) * 2 ;
}
// 获取正在移动的这个对象的宽度
var offW = this .elm.offsetWidth;
// 获取left和top的坐标
var offLeft = Util.getOffset( this .elm, true );
var offTop = Util.getOffset( this .elm, false );
// 防止闪烁,现隐藏
Util.hide();
// 将自己的宽度记录在style属性里面
this .elm.style.width = offW + " px " ;
// 将那个灰框设定得与正在拖动的对象一样高,比较形象
_ghostElement.style.height = offH + " px " ;
// 把灰框放到这个对象原先的位置上
this .elm.parentNode.insertBefore(_ghostElement, this .elm.nextSibling);
// 由于要拖动必须将被拖动的对象从原先的盒子模型里面抽出来,所以设定position为absolute,这个可以参考一下css布局方面的知识
this .elm.style.position = " absolute " ;
// 设置zIndex,让它处在最前面一层,当然其实zIndex=100是让它很靠前,如果页面里有zIndex>100的,那……
this .elm.style.zIndex = 100 ;
// 由于position=absolute了,所以left和top实现绝对坐标定位,这就是先前计算坐标的作用,不让这个模型乱跑,要从开始拖动的地方开始移动
this .elm.style.left = offLeft + " px " ;
this .elm.style.top = offTop + " px " ;
// 坐标设定完毕,可以显示了,这样就不会闪烁了
Util.show();
// 这里本来有个ig_d.G,没搞明白干什么用的,不过没有也可以用,谁知道麻烦告诉我一声,不好意思
// 还没有开始拖拽,这里做个记号
this .isDragging = false ;
return false ;
};
// 在拖拽时的相应函数,由于绑定到鼠标的move这个event上,所以会传入鼠标的坐标clientX, clientY
function when_Drag(clientX, clientY) {
// 刚开始拖拽的时候将图层变透明,并标记为正在被拖拽
if ( ! this .isDragging) {
this .elm.style.filter = " alpha(opacity=70) " ;
this .elm.style.opacity = 0.7 ;
this .isDragging = true ;
}
// 被拖拽到的新的column(当然也可以是原来那个)
var found = null ;
// 最大的距离,可能是防止溢出或者什么bug
var max_distance = 100000000 ;
// 遍历所有的可拖拽的element,寻找离当前鼠标坐标最近的那个可拖拽元素,以便后面插入
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
// 利用勾股定理计算鼠标到遍历到的这个元素的距离
var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2 ) + Math.pow(clientY - ele.elm.pagePosTop, 2 ));
// 自己已经浮动了,所以不计算自己的
if (ele == this ) {
continue ;
}
// 如果计算失败继续循环
if (isNaN(distance)) {
continue ;
}
// 如果更小,记录下这个距离,并将它作为found
if (distance < max_distance) {
max_distance = distance;
found = ele;
}
}
// 准备让灰框落脚
var _ghostElement = getGhostElement();
// 如果找到了另外的落脚点
if (found != null && _ghostElement.nextSibling != found.elm) {
// 找到落脚点就先把灰框插进去,这就是我们看到的那个灰框停靠的特效,有点像吸附的感觉,哈哈
found.elm.parentNode.insertBefore(_ghostElement, found.elm);
if (Util.isOpera) {
// Opera的现实问题,要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
}
};
// 拖拽完毕
function end_Drag() {
// 拖拽完毕后执行后面的钩子,执行after_Drag(),如果布局发生了变动了就记录到远程服务器,保存你拖拽后新的布局顺序
if ( this ._afterDrag()) {
// remote call to save the change
}
return true ;
};
// 拖拽后的执行钩子
function after_Drag() {
var returnValue = false ;
// 防止闪烁
Util.hide();
// 把拖拽时的position=absolute和相关的那些style都消除
this .elm.style.position = "" ;
this .elm.style.width = "" ;
this .elm.style.zIndex = "" ;
this .elm.style.filter = "" ;
this .elm.style.opacity = "" ;
// 获取灰框
var ele = getGhostElement();
// 如果现在的邻居不是原来的邻居了
if (ele.nextSibling != this .origNextSibling) {
// 把被拖拽的这个节点插到灰框的前面
ele.parentNode.insertBefore( this .elm, ele.nextSibling);
// 标明被拖拽了新的地方
returnValue = true ;
}
// 移除灰框,这是这个灰框的生命周期应该就结束了
ele.parentNode.removeChild(ele);
// 修改完毕,显示
Util.show();
if (Util.isOpera) {
// Opera的现实问题,要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
return returnValue;
};
// 可拖拽Element的原形,用来将event绑定到各个钩子,这部分市比较通用的,netvibes也是基本完全相同的实现
// 这部分推荐看dindin的这个,也会帮助理解,http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
var Drag = {
// 对这个element的引用,一次只能拖拽一个Element
obj: null ,
// element是被拖拽的对象的引用,elementHeader就是鼠标可以拖拽的区域
init: function (elementHeader, element) {
// 将start绑定到onmousedown事件,按下鼠标触发start
elementHeader.onmousedown = Drag.start;
// 将element存到header的obj里面,方便header拖拽的时候引用
elementHeader.obj = element;
// 初始化绝对的坐标,因为不是position=absolute所以不会起什么作用,但是防止后面onDrag的时候parse出错了
if (isNaN(parseInt(element.style.left))) {
element.style.left = " 0px " ;
}
if (isNaN(parseInt(element.style.top))) {
element.style.top = " 0px " ;
}
// 挂上空Function,初始化这几个成员,在Drag.init被调用后才帮定到实际的函数,可以参照draggable里面的内容
element.onDragStart = new Function();
element.onDragEnd = new Function();
element.onDrag = new Function();
},
// 开始拖拽的绑定,绑定到鼠标的移动的event上
start: function (event) {
var element = Drag.obj = this .obj;
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which != 1 ) {
// 除了左键都不起作用
return true ;
}
// 参照这个函数的解释,挂上开始拖拽的钩子
element.onDragStart();
// 记录鼠标坐标
element.lastMouseX = event.clientX;
element.lastMouseY = event.clientY;
// 将Global的event绑定到被拖动的element上面来
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
return false ;
},
// Element正在被拖动的函数
drag: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which == 0 ) {
// 除了左键都不起作用
return Drag.end();
}
// 正在被拖动的Element
var element = Drag.obj;
// 鼠标坐标
var _clientX = event.clientY;
var _clientY = event.clientX;
// 如果鼠标没动就什么都不作
if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
return false ;
}
// 刚才Element的坐标
var _lastX = parseInt(element.style.top);
var _lastY = parseInt(element.style.left);
// 新的坐标
var newX, newY;
// 计算新的坐标:原先的坐标+鼠标移动的值差
newX = _lastY + _clientY - element.lastMouseX;
newY = _lastX + _clientX - element.lastMouseY;
// 修改element的显示坐标
element.style.left = newX + " px " ;
element.style.top = newY + " px " ;
// 记录element现在的坐标供下一次移动使用
element.lastMouseX = _clientY;
element.lastMouseY = _clientX;
// 参照这个函数的解释,挂接上Drag时的钩子
element.onDrag(newX, newY);
return false ;
},
// Element正在被释放的函数,停止拖拽
end: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 解除对Global的event的绑定
document.onmousemove = null ;
document.onmouseup = null ;
// 先记录下onDragEnd的钩子,好移除obj
var _onDragEndFuc = Drag.obj.onDragEnd();
// 拖拽完毕,obj清空
Drag.obj = null ;
return _onDragEndFuc;
},
// 解决不同浏览器的event模型不同的问题
fixE: function (ig_) {
if ( typeof ig_ == " undefined " ) {
ig_ = window.event;
}
if ( typeof ig_.layerX == " undefined " ) {
ig_.layerX = ig_.offsetX;
}
if ( typeof ig_.layerY == " undefined " ) {
ig_.layerY = ig_.offsetY;
}
if ( typeof ig_.which == " undefined " ) {
ig_.which = ig_.button;
}
return ig_;
}
};
// 下面是初始化的函数了,看看上面这些东西怎么被调用
var _IG_initDrag = function (el) {
// column那个容器,在google里面就是那个table布局的tbody,netvibes用的<div>
Util.rootElement = el;
// 这个tbody的行
Util._rows = Util.rootElement.tBodies[ 0 ].rows[ 0 ];
// 列,google是3列,其实也可以更多
Util.column = Util._rows.cells;
// 用来存取可拖拽的对象
Util.dragArray = new Array();
var counter = 0 ;
for ( var i = 0 ; i < Util.column.length; i ++ ) {
// 搜索所有的column
var ele = Util.column[i];
for ( var j = 0 ; j < ele.childNodes.length; j ++ ) {
// 搜索每一column里面的所有element
var ele1 = ele.childNodes[j];
// 如果是div就把它初始化为一个draggable对象
if (ele1.tagName == " DIV " ) {
Util.dragArray[counter] = new draggable(ele1);
counter ++ ;
}
}
}
};
// google的页面里可以拖动的部分的id是"t_1"
// 挂载到onload,载入完毕执行。不过实际上google没有用onload。
// 而是写在页面最下面,异曲同工吧,也许直接写在页面是种怪癖,或者也有可能是兼容性考虑。
// 请将下面两条被注释掉的代码加,到你自己下载的一个google ig页面里面,把里面的所有其余script删除,挂上这个js也可以拖拽了,哈哈
// _table=document.getElementById("t_1");
// window.onload = _IG_initDrag(_table);
// 看懂这些代码对学习javascript很有益,希望对大家能有帮助
DEMO页面:
程序代码
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
<style>
<!--
.modbox .el {display:;}
.modbox .csl, .modbox .es {display:none;}
.modbox_e .el {display:none;}
.modbox_e .csl, .modbox .es {display:;}
.dm {position:relative;width:1px;height:1px;}
.fres {width:expression(_gel("ffresults").offsetWidth+"px");overflow:hidden;}
.panelo {}
.panelc {}
.mod {}
.unmod {}
form {display:inline;}
.c {clear:both;}
body,td,a,p,.h{font-family:arial,sans-serif;}
a:link {color:#0000cc; }
a:visited { color:#551a8b; }
a:active { color:#ff0000; }
.q{color:#0000cc;}
a.ab{color: #0000cc;}
h2.modtitle {width:100%;padding-top:0px;padding-bottom:0px;margin: 0em;font-size:100%;font-weight:normal;}
.modbox, .modbox_e {margin-bottom:20px;background-color:white;}
.el,.csl{color:#7777cc;}
.tlc {table-layout:fixed;cursor:pointer;cursor:hand}
.tlc col {font-size:82%}
.tlc td {font-size:82%;empty-cells:show}
.tls {white-space:nowrap;overflow:hidden;}
.tls a {text-decoration:none;color:black;}
.tld {white-space:nowrap;text-align:right;width:8ex;}
.tlq {white-space:nowrap;overflow:hidden;}
#c_1,#c_2,#c_3{width:32%;vertical-align:top;}
.mhdr {width:100%;border-top:1px solid #3366cc;padding:0px;margin:0px;font-size:82%;}
.mttl {width:90%;background-color:#e5ecf9;padding-left:2px;font-weight:bold;padding-right:5px;font-size:122%;}
.mttli {overflow:hidden;height:1.2em;}
.medit {width:10%;background-color:#e5ecf9;white-space:nowrap;text-align:right;vertical-align:top;padding-right:2px;}
.medit,.medit a:visited,.medit a:link, .medit a:active {color:#77c;}
.mdel {border:0;width:16px;height:13px;margin-top:2px;vertical-align:top;}
.mc {width:100%;padding-top:4px;padding-bottom:4px;font-size:82%;}
.mpromo {border: 1px solid #3366cc;text-align:center;vertical-align:middle;margin-bottom:20px;padding:5px;background-color:#e5ecf9;}
.apromo, .cpromo {border: 1px solid #3366cc;background-color:#e5ecf9;padding:2px 5px 2px 5px;white-space:nowrap;cursor:hand;cursor:pointer;font-size:82%;text-decoration:underline;color:#0000cc;}
.apromo {float: left;}
.cpromo {margin:-1px -2px 0 0;float:right;}
#setupbox, #demobox {border:1px solid #3366cc;width:95%;margin-bottom:10px;}
.bt {font-weight:bold;font-size:16px;color:#3366cc;}
.setuptd {padding-right:25px;padding-left:25px;font-size:smaller;}
.mg {font-size:smaller;color:#676767;}
.mg A {color:#7777cc;}
#promomod {border: 1px solid #3366cc;vertical-align:middle;margin-bottom:20px;padding:5px;font-size:smaller;}
-->
</style>
<script src="scripts/google_drag.js"></script>
</head>
<body bgcolor=#ffffff text=#000000 topmargin=3 marginheight=3>
<table cellpadding=0 cellspacing=0 border=0 width=100% height=100%>
<tr>
<td valign=top height=100%>
<div id=cpnl style="height:100%;width:1px;overflow:hidden;">
<style>
<!--
.mlist_open, .mlist_closed {padding-bottom: 5px;}
.mlisthead {font-size: 0.8em;white-space:nowrap;padding-left:14px;text-decoration:none;}
.mlisthead {color:#000000;}
.mlist_open .mlisthead {background: url(/ig/images/arrow-d.gif) no-repeat top left;}
.mlist_closed .mlisthead {background: url(/ig/images/arrow-r.gif) no-repeat top left;}
.mlist_open .psc {display:;}
.mlist_closed .psc {display:none;}
.psc {padding-top:5px;padding-left:15px;}
.mtable td {vertical-align:top;}
.mitem {clear:both;}
.mname {font-size: 0.8em;white-space:nowrap;padding-right:4px;float:left;padding-top:3px;}
.mnamewrap {font-size: 0.8em;white-space:wrap;padding-right:4px;float:left;padding-top:3px;}
.addbtn,.gobtn{margin: 0px;padding: 0px;margin-right: 2px;font-size: 75%;}
.addbtn{float:right;}
.fres {font-size: 82%;padding:5px 0 5px 0;}
.fnores {font-size: 82%;}
.fresurl {overflow:hidden;color:#008800;}
-->
</style>
<div id=cpnlc style="padding:1px;height:100%;width:13em;border-right:1px solid #3366cc;">
<div class=panelo>
<div class=cpromo onClick="return _tp(false)">关闭</div>
</div>
<br>
<div id=ps{198} class=mlist_open><a class=mlisthead href=# onClick="return _ts('ps','{198}');blur();"><font color=#3366cc><b>我的资料</b></font></a>
<div class=psc>
<div class=mitem id="n_30="><span class=mname>书签</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_30=');">
</div>
<div class=mitem id="n_20="><span class=mname>Gmail</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_20=');">
</div>
<div class=mitem id="n_31="><span class=mname>搜索历史记录</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_31=');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{199} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{199}');blur();"><font color=#aa0033><b>新闻</b></font></a>
<div class=psc>
<div id=ps{205} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{205}');blur();"><font color=#aa0033><b>Google 新闻</b></font></a>
<div class=psc>
<div class=mitem id="n_24=sec%3D0" style="display:none"><span class=mname>Top Stories</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D0');">
</div>
<div class=mitem id="n_24=sec%3D3"><span class=mname>World</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D3');">
</div>
<div class=mitem id="n_24=sec%3D5"><span class=mname>Business</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D5');">
</div>
<div class=mitem id="n_24=sec%3D6"><span class=mname>Sci/Tech</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D6');">
</div>
<div class=mitem id="n_24=sec%3D1"><span class=mname>Sports</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D1');">
</div>
<div class=mitem id="n_24=sec%3D2"><span class=mname>Entertainment</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D2');">
</div>
<div class=mitem id="n_24=sec%3D8"><span class=mname>Society</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D8');">
</div>
<div class=mitem id="n_24=sec%3D255"><span class=mname>自选新闻</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D255');">
</div>
</div>
<div class=c></div>
</div>
<div class=mitem id="url=http://news.163.com/special/r/00011K6L/rss_newstop.xml"><span class=mname>网易新闻</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://news.163.com/special/r/00011K6L/rss_newstop.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://rss.xinhuanet.com/rss/world.xml"><span class=mname>新华网</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.xinhuanet.com/rss/world.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://rss.sina.com.cn/news/marquee/ddt.xml"><span class=mname>新浪新闻</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.sina.com.cn/news/marquee/ddt.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{200} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{200}');blur();"><font color=#008000><b>财经</b></font></a>
<div class=psc>
<div class=mitem id="url=http://biz.163.com/special/b/00021HSF/bizbignews.xml" style="display:none"><span class=mname>网易商业</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://biz.163.com/special/b/00021HSF/bizbignews.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://rss.xinhuanet.com/rss/fortune.xml"><span class=mname>新华网财经新闻</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.xinhuanet.com/rss/fortune.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{201} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{201}');blur();"><font color=#cc0000><b>科技</b></font></a>
<div class=psc>
<div class=mitem id="url=http://news.chinabyte.com/index.xml"><span class=mname>天极网</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://news.chinabyte.com/index.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://rss.zol.com.cn/news.xml"><span class=mname>中关村在线</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.zol.com.cn/news.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://blog.joycode.com/MainFeed.aspx"><span class=mname>博客堂</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://blog.joycode.com/MainFeed.aspx%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{202} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{202}');blur();"><font color=#ff6600><b>体育</b></font></a>
<div class=psc>
<div class=mitem id="url=http://rss.sina.com.cn/news/allnews/sports.xml" style="display:none"><span class=mname>新浪体育</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.sina.com.cn/news/allnews/sports.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://sports.163.com/special/r/00051K7F/rss_sportszh.xml"><span class=mname>网易体育</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://sports.163.com/special/r/00051K7F/rss_sportszh.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{203} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{203}');blur();"><font color=#669999><b>生活方式</b></font></a>
<div class=psc>
<div class=mitem id="url=http://rss.sina.com.cn/book/culture10.xml"><span class=mname>新浪文化</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.sina.com.cn/book/culture10.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://www.rayli.com.cn/news/0001.xml"><span class=mname>瑞丽</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://www.rayli.com.cn/news/0001.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{204} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{204}');blur();"><font color=#663399><b>娱乐</b></font></a>
<div class=psc>
<div class=mitem id="url=http://bookmark.hexun.com/rss/hot.xml" style="display:none"><span class=mname>和讯网摘</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://bookmark.hexun.com/rss/hot.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://blog.cnblog.org/index.xml"><span class=mname>CNBlog</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://blog.cnblog.org/index.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://weekly.bokee.com/weekly.xml"><span class=mname>博客</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://weekly.bokee.com/weekly.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps新增组件 class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','新增组件');blur();"><font color=#aa0033><b>新增组件</b></font></a>
<div class=psc>
<div class=mitem id="n_32=url%3Dchinese_common_search.xml"><span class=mname>地区信息常用搜索</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_32=url%3Dchinese_common_search.xml');">
</div>
<div class=mitem id="n_32=url%3Dchinese_calendar_converter.xml"><span class=mname>公历农历转换</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_32=url%3Dchinese_calendar_converter.xml');">
</div>
<div class=mitem id="n_32=url%3Dchinese_unit_converter.xml"><span class=mname>度量制式转换</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_32=url%3Dchinese_unit_converter.xml');">
</div>
</div>
<div class=c></div>
</div>
<div id=create class=mlist_open><a class=mlisthead href=# onClick="return _ts('create', '');blur();"><font color=#000088><b>创建一个部分</b></font></a>
<div class=psc>
<form onSubmit="return _find_feed()">
<font size=-1>按主题或供稿源网址搜索:</font><br>
<input type=text size=20 id=add_custom>
<input type=submit class=gobtn value="开始">
<br>
<font size=-1><i>例如:健身,时代杂志或engadget.com/rss.xml</i></font>
</form>
<div id=ffresults style="margin-top:5px"></div>
</div>
</div>
</div>
</div>
</td>
<td valign=top width=100%>
<div id=nhdr>
<table class=panelc width=100% cellspacing=0 cellpadding=0 border=0>
<tr>
<td>
<div id=addc class=mod><span class=apromo onClick="return _tp(true)">添加内容</span></div>
</td>
<td>
<div id=gbar>
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
<td align=right nowrap><font size=-1><a href="/url?sa=p&pref=ig&pval=1&q=/webhp">常规主页</a> | <a href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">登录</a></font></td>
</tr>
<tr height=4>
<td><img alt="" width=1 height=1></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script><!--
function qs(el) {if (window.RegExp && window.encodeURIComponent) {var qe=encodeURIComponent(document.f.q.value);if (el.href.indexOf("q=")!=-1) {el.href=el.href.replace(new RegExp("q=[^&$]*"),"q="+qe);}else {el.href+="&q="+qe;}}return 1;}
// -->
</script>
<font size=-3><br>
</font>
<div id=sf>
<table border=0 cellpadding=0 cellspacing=0 align=center width=1%>
<tr>
<td valign=top>
<div id=logo><a href="/search?q=earth+day"><img src=/logos/earthday06_res.gif width=150 height=65 border=0 alt="Earth Day" title="Earth Day" border=0 style="margin-top:5px"></a></div>
</td>
<form style="display:inline" id=sfrm name=f method=GET action=/search>
<td valign=top>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td height=14 valign=bottom>
<div id=tabs>
<script><!--
function qs(el) {if (window.RegExp && window.encodeURIComponent) {var ue=el.href;var qe=encodeURIComponent(document.f.q.value);if(ue.indexOf("q=")!=-1){el.href=ue.replace(new RegExp("q=[^&$]*"),"q="+qe);}else{el.href=ue+"&q="+qe;}}return 1;}
// -->
</script>
<table border=0 cellspacing=0 cellpadding=4>
<tr>
<td nowrap><font size=-1><b>网页</b> <a id=1a class=q href="/imghp?hl=zh-CN&tab=wi" onClick="return qs(this);">图片</a> <a id=2a class=q href="http://news.google.com/nwshp?hl=zh-CN&tab=wn" onClick="return qs(this);">资讯</a> <a id=5a class=q href="http://groups.google.com/grphp?hl=zh-CN&tab=wg" onClick="return qs(this);">论坛</a> <a id=11a class=q href="/dirhp?hl=zh-CN&tab=wd" onClick="return qs(this);">网页目录</a> <b><a href="/intl/zh-CN/options/" class=q>更多 »</a></b></font></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td nowrap align=center>
<div id=sbox>
<input type=hidden name=hl id=hl value="zh-CN">
<input type=text name=q id=q size="55" maxlength=2048 value="">
</div>
<div style="display:inline" id=btng>
<input type=submit value="Google 搜索" name=btnG>
</div>
<div style="display:inline" id=btni>
<input type=submit value="手气不错" name=btnI>
</div>
</td>
<td nowrap valign=top width=150><font size=-2>
<div id=as> <a href=/advanced_search?hl=zh-CN>高级搜索</a></div>
<div id=prefs> <a href=/preferences?hl=zh-CN>使用偏好</a></div>
<div id=lgt> <a href=/language_tools?hl=zh-CN>语言工具</a></div>
</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td colspan=3 align=center><font size=-1>
<input id=all type=radio name=lr value="" checked>
<label for=all>搜索所有网页</label>
<input id=ch type=radio name=lr value=lang_zh-CN|lang_zh-TW>
<label for=ch>搜索所有中文网页</label>
<input id=il type=radio name=lr value=lang_zh-CN>
<label for=il>搜索简体中文网页</label>
</font></td>
</tr>
</table>
<div id=promo></div>
</form>
</div>
<script><!--
/*
if (document.all) {_IG_AddEventHandler("focus",function() {_gel("q").focus();window.onfocus = null;});} else {_gel("q").focus();}// -->
*/
</script>
</div>
<div id=ehdr style="display:none;">
<table cellspacing=0 cellpadding=0 border=0 width=98% style="padding-top:8px;padding-left:5px">
<tr>
<td width=150 nowrap="" valign=top style="padding-right:6px"><img src=http://www.google.com/images/logo_sm.gif alt="Google" border=0 width=150 height=55></td>
<td style="padding-right:8px">
<table width=100% cellpadding=0 cellspacing=4 border=0 style="margin-bottom:12px">
<tr>
<td nowrap colspan=2><b>将您的 Google 主页个性化</b>
<div style="padding-bottom: 5px;"></div>
<font size=-1> •请使用左侧窗格添加内容<br>
•通过拖放重新排列网页</font></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="undel_msg" style="padding:2px 10px;display:none;">
<table bgcolor="#ffff99" align="center" cellpadding=5>
<tr>
<td align="center" nowrap><font size=-1> <b><span id="undel_title"></span> 部分已删除。<a href="javascript:void(_undel())">取消</a></b> </font></td>
</tr>
</table>
</div>
<noscript>
<center>
<br>
<span style="padding:2px;background-color:#fad163;">您需要启动JavaScript 才能使用本网页,</span><br>
</center>
</noscript>
<div id=tip style="padding-top:10px;padding-bottom:7px"></div>
<script>
/*
function _ig_lsb() {if (document.body && document.body.scrollWidth) {var c1w = _gel("c_1").clientWidth;var c2w = _gel("c_2").clientWidth;var c3w = _gel("c_3").clientWidth;var dbw = document.body.scrollWidth;if (c1w > 0.5*dbw) {_xsetp("lsb="+_esc(c1w+"*"+c2w+"*"+c3w+"*"+dbw));}}}
_IG_RegisterOnloadHandler(_ig_lsb);
*/
</script>
<div id=modules>
<table id=t_1 cellspacing=10 border=0 width=98% align=center style="table-layout:fixed;">
<tr>
<td id=c_1>
<div class=unmod style="display:none">
<div class=mpromo><a class=q href=# onClick="return _tp(true)">将您的 <br>
Google 主页个性化</a>
<p>已经个性化?<br>
<a href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">登录</a>
</div>
</div>
<div id=promobox class=mod>
<div class=mpromo>
<table border=0 cellpadding=0 cellspacing=0>
<tr valign=top>
<td align=left style="padding-bottom:3px"><font color=#3366cc><b>保存此页</b></font></td>
<td align=right><a href="#" onClick="_delpromobox()"><img src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr>
<td colspan=2><font size=-1>您可以保存此页并通过<a href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">登录 Google 帐户</a>查看。如果您使用多台计算机或与他人共用一台计算机,我们建议您利用这一功能。您还没有 Google 帐户吗?不妨<a href="https://www.google.com/accounts/NewAccount?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">创建一个</a>。<br>
</font></td>
</tr>
</table>
</div>
</div>
<div id=m_3 class=modbox style="position:relative">
<h2 class=modtitle>
<table class=mhdr cellspacing=0 cellpadding=0>
<tr>
<td id=m_3_h class=mttl><a class=mttli id=m_3_url href="http://sports.sina.com.cn" style="color:#ff6600;">新浪体育</a></td>
<td id=m_3_e class=medit><a href="#" class=el onClick="return _edit('3',null);">编辑</a><a href="#" class=csl onClick="return _cedit('3');">取消</a><a href="#" onClick="return _del('3',25,'url=http://rss.sina.com.cn/news/allnews/sports.xml')"><img alt="删除" src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr class=es>
<td colspan=2 bgcolor=#e5ecf9>
<form id=m_3_form onSubmit="return _fsetp(this,'3',25)">
<div style="padding:5px">
<div style="white-space:nowrap">显示
<select onChange="_uhc('3','val',this.value)">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
项
<input class=submitbtn type=submit value="保存">
</div>
</div>
</form>
</td>
</tr>
</table>
</h2>
<div class=mc><a href="http://sports.sina.com.cn/k/2006-04-24/12572178545.shtml">大郅连线姚明:期待与巨人配合 尽快康复世锦赛见</a></div>
<div class=mc><a href="http://sports.sina.com.cn/o/2006-04-24/07082177692.shtml">新浪对话刘国梁:小组赛力争第一 陈^成为杀手锏</a></div>
<div class=mc><a href="http://sports.sina.com.cn/k/2006-04-24/12422178514.shtml">张博:奥胖与热火一同老去 科比飙分湖人才能胜利</a></div>
</div>
<div class=dm></div>
</td>
<td> </td>
<td id=c_2>
<div id=m_1 class=modbox style="position:relative">
<h2 class=modtitle>
<table class=mhdr cellspacing=0 cellpadding=0>
<tr>
<td id=m_1_h class=mttl><a class=mttli id=m_1_url href="http://news.google.com/news?hl=zh-CN" style="color:#aa0033;">Top Stories</a></td>
<td id=m_1_e class=medit><a href="#" class=el onClick="return _edit('1',null);">编辑</a><a href="#" class=csl onClick="return _cedit('1');">取消</a><a href="#" onClick="return _del('1',24,'n_24=sec%3D0')"><img alt="删除" src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr class=es>
<td colspan=2 bgcolor=#e5ecf9>
<form id=m_1_form onSubmit="return _fsetp(this,'1',24)">
<div style="padding:5px">
<div style="white-space:nowrap">显示
<select onChange="_uhc('1','val',this.value)">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
篇报道
<input class=submitbtn type=submit value="保存">
</div>
</div>
</form>
</td>
</tr>
</table>
</h2>
<div class=mc>
<div><a href="http://www.gmw.cn/content/2006-04/24/content_408754.htm">中国大规模从所罗门撤侨</a></div>
<font color=#6f6f6f>光明网 - </font><a href="http://news.google.com/?ncl=http://www.gmw.cn/content/2006-04/24/content_408754.htm&hl=zh-CN" style="color:green;"><nobr>所有 756 相关报道 »</nobr></a></div>
<div class=mc>
<div><a href="http://pinglun.eastday.com/eastday/node127047/node127048/node127049/node127074/node127076/userobject1ai1999974.html">让阅读成为习惯</a></div>
<font color=#6f6f6f>东方网 - </font><a href="http://news.google.com/?ncl=http://pinglun.eastday.com/eastday/node127047/node127048/node127049/node127074/node127076/userobject1ai1999974.html&hl=zh-CN" style="color:green;"><nobr>所有 232 相关报道 »</nobr></a></div>
<div class=mc>
<div><a href="http://www.njnews.cn/u/ca755339.htm">市领导远赴舟山慰问“南京舰”官兵</a></div>
<font color=#6f6f6f>南京报业 - </font><a href="http://news.google.com/?ncl=http://www.njnews.cn/u/ca755339.htm&hl=zh-CN" style="color:green;"><nobr>所有 773 相关报道 »</nobr></a></div>
</div>
<div class=dm></div>
</td>
<td> </td>
<td id=c_3>
<div id=m_4 class=modbox style="position:relative">
<h2 class=modtitle>
<table class=mhdr cellspacing=0 cellpadding=0>
<tr>
<td id=m_4_h class=mttl><a class=mttli id=m_4_url href="http://biz.163.com/special/m/00020UQ7/mainnews.html" style="color:#008000;">网易商业</a></td>
<td id=m_4_e class=medit><a href="#" class=el onClick="return _edit('4',null);">编辑</a><a href="#" class=csl onClick="return _cedit('4');">取消</a><a href="#" onClick="return _del('4',25,'url=http://biz.163.com/special/b/00021HSF/bizbignews.xml')"><img alt="删除" src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr class=es>
<td colspan=2 bgcolor=#e5ecf9>
<form id=m_4_form onSubmit="return _fsetp(this,'4',25)">
<div style="padding:5px">
<div style="white-space:nowrap">显示
<select onChange="_uhc('4','val',this.value)">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
项
<input class=submitbtn type=submit value="保存">
</div>
</div>
</form>
</td>
</tr>
</table>
</h2>
<div class=mc><a href="http://biz.163.com/06/0424/08/2FF8RND800020QED.html">联通与网通将合并? 3G牌照发放没有时间表</a></div>
<div class=mc><a href="http://biz.163.com/06/0423/02/2FC1VHPC00021T9L.html">[独家]专访黄光裕:董事长和CEO分离的日子不远了</a></div>
<div class=mc><a href="http://biz.163.com/06/0424/10/2FFHP21600020QEP.html">海尔电器4.2亿港元售手机业务 专注发展白色家电</a></div>
</div>
<div id=m_2 class=modbox style="position:relative">
<h2 class=modtitle>
<table class=mhdr cellspacing=0 cellpadding=0>
<tr>
<td id=m_2_h class=mttl><a class=mttli id=m_2_url href="http://bookmark.hexun.com" style="color:#663399;">和讯网摘</a></td>
<td id=m_2_e class=medit><a href="#" class=el onClick="return _edit('2',null);">编辑</a><a href="#" class=csl onClick="return _cedit('2');">取消</a><a href="#" onClick="return _del('2',25,'url=http://bookmark.hexun.com/rss/hot.xml')"><img alt="删除" src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr class=es>
<td colspan=2 bgcolor=#e5ecf9>
<form id=m_2_form onSubmit="return _fsetp(this,'2',25)">
<div style="padding:5px">
<div style="white-space:nowrap">显示
<select onChange="_uhc('2','val',this.value)">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
项
<input class=submitbtn type=submit value="保存">
</div>
</div>
</form>
</td>
</tr>
</table>
</h2>
<div class=mc><a href="http://bookmark.hexun.com/zhiqiangsky/go.aspx?bid=1412917&type=rss">川菜:重庆水煮鱼做法(图解) [和讯博客]</a></div>
<div class=mc><a href="http://bookmark.hexun.com/pkinghua2004/go.aspx?bid=1412862&type=rss">培养愉快心情的十种方法 [和讯博客]</a></div>
<div class=mc><a href="http://bookmark.hexun.com/billee/go.aspx?bid=1410184&type=rss">博得众人喜爱的28条原则</a></div>
</div>
<div class=dm></div>
</td>
</tr>
</table>
</div>
<center>
<div class=mod style="display:none"><font size=-1>保存此页,即可在其它计算机上使用<a href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">Google 帐户</a>时查阅。<br>
</font></div>
<br>
<div id=footer align=center style="white-space:nowrap"><font size=-1><a href="/intl/zh-CN/ads/">广告计划</a> - <a href="/intl/zh-CN/help/privacy_fusionph.html">隐私政策</a> - <a href="/support/bin/topic.py?topic=1592&hl=zh-CN">帮助</a> - <a href="/intl/zh-CN/about.html">Google 大全</a></font>
<p><font size=-2>©2006 Google</font>
</div>
</center>
</td>
</tr>
</table>
<script>
<!--
//google的页面里可以拖动的部分的id是"t_1"
_table=document.getElementById("t_1");
//挂载到onload,载入完毕执行。不过实际上google没有用onload。
//而是写在页面最下面,异曲同工吧,也许直接写在页面是种怪癖,或者也有可能是兼容性考虑。
//行了,你可以自己下载一个google ig的页面了,把里面的所有script删除挂上这个js也可以拖拽了,哈哈
//其实看懂这些代码对学习javascript很有益,希望对大家能有帮助
window.onload = _IG_initDrag(_table);
-->
</script>
</body>
</html>
程序代码// 工具类,使用Util的命名空间,方便管理
var Util = new Object();
// 获取http header里面的UserAgent,浏览器信息
Util.getUserAgent = navigator.userAgent;
// 是否是Gecko核心的Browser,比如Mozila、Firefox
Util.isGecko = Util.getUserAgent.indexOf( " Gecko " ) != - 1 ;
// 是否是Opera
Util.isOpera = Util.getUserAgent.indexOf( " Opera " ) != - 1 ;
// 获取一个element的offset信息,其实就是相对于Body的padding以内的绝对坐标
// 后面一个参数如果是true则获取offsetLeft,false则是offsetTop
// 关于offset、style、client等坐标的定义参考dindin的这个帖子:http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
Util.getOffset = function (el, isLeft) {
var retValue = 0 ;
while (el != null ) {
retValue += el[ " offset " + (isLeft ? " Left " : " Top " )];
el = el.offsetParent;
}
return retValue;
};
// 将一个function(参数中的funcName是这个fuction的名字)绑定到一个element上,并且以这个element的上下文运行,其实是一种继承,这个可以google些文章看看
Util.bindFunction = function (el, fucName) {
return function () {
return el[fucName].apply(el, arguments);
};
};
// 重新计算所有的可以拖拽的element的坐标,对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标,防止遮叠
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff = function (el) {
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
ele.elm.pagePosLeft = Util.getOffset(ele.elm, true );
ele.elm.pagePosTop = Util.getOffset(ele.elm, false );
}
var nextSib = el.elm.nextSibling;
while (nextSib) {
nextSib.pagePosTop -= el.elm.offsetHeight;
nextSib = nextSib.nextSibling;
}
};
// 隐藏Google Ig中间那个table,也就是拖拽的容器,配合show一般就是刷新用,解决一些浏览器的怪癖
Util.hide = function () {
Util.rootElement.style.display = " none " ;
};
// 显示Google Ig中间那个table,解释同上
Util.show = function () {
Util.rootElement.style.display = "" ;
};
// 移动时显示的占位虚线框
ghostElement = null ;
// 获取这个虚线框,通过dom动态生成
getGhostElement = function () {
if ( ! ghostElement) {
ghostElement = document.createElement( " DIV " );
ghostElement.className = " modbox " ;
ghostElement.backgroundColor = "" ;
ghostElement.style.border = " 2px dashed #aaa " ;
ghostElement.innerHTML = " " ;
}
return ghostElement;
};
// 初始化可以拖拽的Element的函数,与拖拽无关的我去掉了
function draggable(el) {
// 公用的开始拖拽的函数
this ._dragStart = start_Drag;
// 公用的正在拖拽的函数
this ._drag = when_Drag;
// 公用的拖拽结束的函数
this ._dragEnd = end_Drag;
// 这个函数主要用来进行拖拽结束后的dom处理
this ._afterDrag = after_Drag;
// 是否正在被拖动,一开始当然没有被拖动
this .isDragging = false ;
// 将这个Element的this指针注册在elm这个变量里面,方便在自己的上下文以外调用自己的函数等,很常用的方法
this .elm = el;
// 触发拖拽的Element,在这里就是这个div上显示标题的那个div
this .header = document.getElementById(el.id + " _h " );
// 对于有iframe的element拖拽不同,这里检测一下并记录
this .hasIFrame = this .elm.getElementsByTagName( " IFRAME " ).length > 0 ;
// 如果找到了header就绑定drag相关的event
if ( this .header) {
// 拖拽时的叉子鼠标指针
this .header.style.cursor = " move " ;
// 将函数绑定到header和element的this上,参照那个函数的说明
Drag.init( this .header, this .elm);
// 下面三个语句将写好的三个函数绑定给这个elemnt的三个函数钩子上,也就实现了element从draggable继承可拖拽的函数
this .elm.onDragStart = Util.bindFunction( this , " _dragStart " );
this .elm.onDrag = Util.bindFunction( this , " _drag " );
this .elm.onDragEnd = Util.bindFunction( this , " _dragEnd " );
}
};
// 下面就是draggable里面用到的那4个function
// 公用的开始拖拽的函数
function start_Drag() {
// 重置坐标,实现拖拽以后自己的位置马上会被填充的效果
Util.re_calcOff( this );
// 记录原先的邻居节点,用来对比是否被移动到新的位置
this .origNextSibling = this .elm.nextSibling;
// 获取移动的时候那个灰色的虚线框
var _ghostElement = getGhostElement();
// 获取正在移动的这个对象的高度
var offH = this .elm.offsetHeight;
if (Util.isGecko) {
// 修正gecko引擎的怪癖吧
offH -= parseInt(_ghostElement.style.borderTopWidth) * 2 ;
}
// 获取正在移动的这个对象的宽度
var offW = this .elm.offsetWidth;
// 获取left和top的坐标
var offLeft = Util.getOffset( this .elm, true );
var offTop = Util.getOffset( this .elm, false );
// 防止闪烁,现隐藏
Util.hide();
// 将自己的宽度记录在style属性里面
this .elm.style.width = offW + " px " ;
// 将那个灰框设定得与正在拖动的对象一样高,比较形象
_ghostElement.style.height = offH + " px " ;
// 把灰框放到这个对象原先的位置上
this .elm.parentNode.insertBefore(_ghostElement, this .elm.nextSibling);
// 由于要拖动必须将被拖动的对象从原先的盒子模型里面抽出来,所以设定position为absolute,这个可以参考一下css布局方面的知识
this .elm.style.position = " absolute " ;
// 设置zIndex,让它处在最前面一层,当然其实zIndex=100是让它很靠前,如果页面里有zIndex>100的,那……
this .elm.style.zIndex = 100 ;
// 由于position=absolute了,所以left和top实现绝对坐标定位,这就是先前计算坐标的作用,不让这个模型乱跑,要从开始拖动的地方开始移动
this .elm.style.left = offLeft + " px " ;
this .elm.style.top = offTop + " px " ;
// 坐标设定完毕,可以显示了,这样就不会闪烁了
Util.show();
// 这里本来有个ig_d.G,没搞明白干什么用的,不过没有也可以用,谁知道麻烦告诉我一声,不好意思
// 还没有开始拖拽,这里做个记号
this .isDragging = false ;
return false ;
};
// 在拖拽时的相应函数,由于绑定到鼠标的move这个event上,所以会传入鼠标的坐标clientX, clientY
function when_Drag(clientX, clientY) {
// 刚开始拖拽的时候将图层变透明,并标记为正在被拖拽
if ( ! this .isDragging) {
this .elm.style.filter = " alpha(opacity=70) " ;
this .elm.style.opacity = 0.7 ;
this .isDragging = true ;
}
// 被拖拽到的新的column(当然也可以是原来那个)
var found = null ;
// 最大的距离,可能是防止溢出或者什么bug
var max_distance = 100000000 ;
// 遍历所有的可拖拽的element,寻找离当前鼠标坐标最近的那个可拖拽元素,以便后面插入
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
// 利用勾股定理计算鼠标到遍历到的这个元素的距离
var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2 ) + Math.pow(clientY - ele.elm.pagePosTop, 2 ));
// 自己已经浮动了,所以不计算自己的
if (ele == this ) {
continue ;
}
// 如果计算失败继续循环
if (isNaN(distance)) {
continue ;
}
// 如果更小,记录下这个距离,并将它作为found
if (distance < max_distance) {
max_distance = distance;
found = ele;
}
}
// 准备让灰框落脚
var _ghostElement = getGhostElement();
// 如果找到了另外的落脚点
if (found != null && _ghostElement.nextSibling != found.elm) {
// 找到落脚点就先把灰框插进去,这就是我们看到的那个灰框停靠的特效,有点像吸附的感觉,哈哈
found.elm.parentNode.insertBefore(_ghostElement, found.elm);
if (Util.isOpera) {
// Opera的现实问题,要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
}
};
// 拖拽完毕
function end_Drag() {
// 拖拽完毕后执行后面的钩子,执行after_Drag(),如果布局发生了变动了就记录到远程服务器,保存你拖拽后新的布局顺序
if ( this ._afterDrag()) {
// remote call to save the change
}
return true ;
};
// 拖拽后的执行钩子
function after_Drag() {
var returnValue = false ;
// 防止闪烁
Util.hide();
// 把拖拽时的position=absolute和相关的那些style都消除
this .elm.style.position = "" ;
this .elm.style.width = "" ;
this .elm.style.zIndex = "" ;
this .elm.style.filter = "" ;
this .elm.style.opacity = "" ;
// 获取灰框
var ele = getGhostElement();
// 如果现在的邻居不是原来的邻居了
if (ele.nextSibling != this .origNextSibling) {
// 把被拖拽的这个节点插到灰框的前面
ele.parentNode.insertBefore( this .elm, ele.nextSibling);
// 标明被拖拽了新的地方
returnValue = true ;
}
// 移除灰框,这是这个灰框的生命周期应该就结束了
ele.parentNode.removeChild(ele);
// 修改完毕,显示
Util.show();
if (Util.isOpera) {
// Opera的现实问题,要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
return returnValue;
};
// 可拖拽Element的原形,用来将event绑定到各个钩子,这部分市比较通用的,netvibes也是基本完全相同的实现
// 这部分推荐看dindin的这个,也会帮助理解,http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
var Drag = {
// 对这个element的引用,一次只能拖拽一个Element
obj: null ,
// element是被拖拽的对象的引用,elementHeader就是鼠标可以拖拽的区域
init: function (elementHeader, element) {
// 将start绑定到onmousedown事件,按下鼠标触发start
elementHeader.onmousedown = Drag.start;
// 将element存到header的obj里面,方便header拖拽的时候引用
elementHeader.obj = element;
// 初始化绝对的坐标,因为不是position=absolute所以不会起什么作用,但是防止后面onDrag的时候parse出错了
if (isNaN(parseInt(element.style.left))) {
element.style.left = " 0px " ;
}
if (isNaN(parseInt(element.style.top))) {
element.style.top = " 0px " ;
}
// 挂上空Function,初始化这几个成员,在Drag.init被调用后才帮定到实际的函数,可以参照draggable里面的内容
element.onDragStart = new Function();
element.onDragEnd = new Function();
element.onDrag = new Function();
},
// 开始拖拽的绑定,绑定到鼠标的移动的event上
start: function (event) {
var element = Drag.obj = this .obj;
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which != 1 ) {
// 除了左键都不起作用
return true ;
}
// 参照这个函数的解释,挂上开始拖拽的钩子
element.onDragStart();
// 记录鼠标坐标
element.lastMouseX = event.clientX;
element.lastMouseY = event.clientY;
// 将Global的event绑定到被拖动的element上面来
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
return false ;
},
// Element正在被拖动的函数
drag: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which == 0 ) {
// 除了左键都不起作用
return Drag.end();
}
// 正在被拖动的Element
var element = Drag.obj;
// 鼠标坐标
var _clientX = event.clientY;
var _clientY = event.clientX;
// 如果鼠标没动就什么都不作
if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
return false ;
}
// 刚才Element的坐标
var _lastX = parseInt(element.style.top);
var _lastY = parseInt(element.style.left);
// 新的坐标
var newX, newY;
// 计算新的坐标:原先的坐标+鼠标移动的值差
newX = _lastY + _clientY - element.lastMouseX;
newY = _lastX + _clientX - element.lastMouseY;
// 修改element的显示坐标
element.style.left = newX + " px " ;
element.style.top = newY + " px " ;
// 记录element现在的坐标供下一次移动使用
element.lastMouseX = _clientY;
element.lastMouseY = _clientX;
// 参照这个函数的解释,挂接上Drag时的钩子
element.onDrag(newX, newY);
return false ;
},
// Element正在被释放的函数,停止拖拽
end: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 解除对Global的event的绑定
document.onmousemove = null ;
document.onmouseup = null ;
// 先记录下onDragEnd的钩子,好移除obj
var _onDragEndFuc = Drag.obj.onDragEnd();
// 拖拽完毕,obj清空
Drag.obj = null ;
return _onDragEndFuc;
},
// 解决不同浏览器的event模型不同的问题
fixE: function (ig_) {
if ( typeof ig_ == " undefined " ) {
ig_ = window.event;
}
if ( typeof ig_.layerX == " undefined " ) {
ig_.layerX = ig_.offsetX;
}
if ( typeof ig_.layerY == " undefined " ) {
ig_.layerY = ig_.offsetY;
}
if ( typeof ig_.which == " undefined " ) {
ig_.which = ig_.button;
}
return ig_;
}
};
// 下面是初始化的函数了,看看上面这些东西怎么被调用
var _IG_initDrag = function (el) {
// column那个容器,在google里面就是那个table布局的tbody,netvibes用的<div>
Util.rootElement = el;
// 这个tbody的行
Util._rows = Util.rootElement.tBodies[ 0 ].rows[ 0 ];
// 列,google是3列,其实也可以更多
Util.column = Util._rows.cells;
// 用来存取可拖拽的对象
Util.dragArray = new Array();
var counter = 0 ;
for ( var i = 0 ; i < Util.column.length; i ++ ) {
// 搜索所有的column
var ele = Util.column[i];
for ( var j = 0 ; j < ele.childNodes.length; j ++ ) {
// 搜索每一column里面的所有element
var ele1 = ele.childNodes[j];
// 如果是div就把它初始化为一个draggable对象
if (ele1.tagName == " DIV " ) {
Util.dragArray[counter] = new draggable(ele1);
counter ++ ;
}
}
}
};
// google的页面里可以拖动的部分的id是"t_1"
// 挂载到onload,载入完毕执行。不过实际上google没有用onload。
// 而是写在页面最下面,异曲同工吧,也许直接写在页面是种怪癖,或者也有可能是兼容性考虑。
// 请将下面两条被注释掉的代码加,到你自己下载的一个google ig页面里面,把里面的所有其余script删除,挂上这个js也可以拖拽了,哈哈
// _table=document.getElementById("t_1");
// window.onload = _IG_initDrag(_table);
// 看懂这些代码对学习javascript很有益,希望对大家能有帮助
DEMO页面:
程序代码<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
<style>
<!--
.modbox .el {display:;}
.modbox .csl, .modbox .es {display:none;}
.modbox_e .el {display:none;}
.modbox_e .csl, .modbox .es {display:;}
.dm {position:relative;width:1px;height:1px;}
.fres {width:expression(_gel("ffresults").offsetWidth+"px");overflow:hidden;}
.panelo {}
.panelc {}
.mod {}
.unmod {}
form {display:inline;}
.c {clear:both;}
body,td,a,p,.h{font-family:arial,sans-serif;}
a:link {color:#0000cc; }
a:visited { color:#551a8b; }
a:active { color:#ff0000; }
.q{color:#0000cc;}
a.ab{color: #0000cc;}
h2.modtitle {width:100%;padding-top:0px;padding-bottom:0px;margin: 0em;font-size:100%;font-weight:normal;}
.modbox, .modbox_e {margin-bottom:20px;background-color:white;}
.el,.csl{color:#7777cc;}
.tlc {table-layout:fixed;cursor:pointer;cursor:hand}
.tlc col {font-size:82%}
.tlc td {font-size:82%;empty-cells:show}
.tls {white-space:nowrap;overflow:hidden;}
.tls a {text-decoration:none;color:black;}
.tld {white-space:nowrap;text-align:right;width:8ex;}
.tlq {white-space:nowrap;overflow:hidden;}
#c_1,#c_2,#c_3{width:32%;vertical-align:top;}
.mhdr {width:100%;border-top:1px solid #3366cc;padding:0px;margin:0px;font-size:82%;}
.mttl {width:90%;background-color:#e5ecf9;padding-left:2px;font-weight:bold;padding-right:5px;font-size:122%;}
.mttli {overflow:hidden;height:1.2em;}
.medit {width:10%;background-color:#e5ecf9;white-space:nowrap;text-align:right;vertical-align:top;padding-right:2px;}
.medit,.medit a:visited,.medit a:link, .medit a:active {color:#77c;}
.mdel {border:0;width:16px;height:13px;margin-top:2px;vertical-align:top;}
.mc {width:100%;padding-top:4px;padding-bottom:4px;font-size:82%;}
.mpromo {border: 1px solid #3366cc;text-align:center;vertical-align:middle;margin-bottom:20px;padding:5px;background-color:#e5ecf9;}
.apromo, .cpromo {border: 1px solid #3366cc;background-color:#e5ecf9;padding:2px 5px 2px 5px;white-space:nowrap;cursor:hand;cursor:pointer;font-size:82%;text-decoration:underline;color:#0000cc;}
.apromo {float: left;}
.cpromo {margin:-1px -2px 0 0;float:right;}
#setupbox, #demobox {border:1px solid #3366cc;width:95%;margin-bottom:10px;}
.bt {font-weight:bold;font-size:16px;color:#3366cc;}
.setuptd {padding-right:25px;padding-left:25px;font-size:smaller;}
.mg {font-size:smaller;color:#676767;}
.mg A {color:#7777cc;}
#promomod {border: 1px solid #3366cc;vertical-align:middle;margin-bottom:20px;padding:5px;font-size:smaller;}
-->
</style>
<script src="scripts/google_drag.js"></script>
</head>
<body bgcolor=#ffffff text=#000000 topmargin=3 marginheight=3>
<table cellpadding=0 cellspacing=0 border=0 width=100% height=100%>
<tr>
<td valign=top height=100%>
<div id=cpnl style="height:100%;width:1px;overflow:hidden;">
<style>
<!--
.mlist_open, .mlist_closed {padding-bottom: 5px;}
.mlisthead {font-size: 0.8em;white-space:nowrap;padding-left:14px;text-decoration:none;}
.mlisthead {color:#000000;}
.mlist_open .mlisthead {background: url(/ig/images/arrow-d.gif) no-repeat top left;}
.mlist_closed .mlisthead {background: url(/ig/images/arrow-r.gif) no-repeat top left;}
.mlist_open .psc {display:;}
.mlist_closed .psc {display:none;}
.psc {padding-top:5px;padding-left:15px;}
.mtable td {vertical-align:top;}
.mitem {clear:both;}
.mname {font-size: 0.8em;white-space:nowrap;padding-right:4px;float:left;padding-top:3px;}
.mnamewrap {font-size: 0.8em;white-space:wrap;padding-right:4px;float:left;padding-top:3px;}
.addbtn,.gobtn{margin: 0px;padding: 0px;margin-right: 2px;font-size: 75%;}
.addbtn{float:right;}
.fres {font-size: 82%;padding:5px 0 5px 0;}
.fnores {font-size: 82%;}
.fresurl {overflow:hidden;color:#008800;}
-->
</style>
<div id=cpnlc style="padding:1px;height:100%;width:13em;border-right:1px solid #3366cc;">
<div class=panelo>
<div class=cpromo onClick="return _tp(false)">关闭</div>
</div>
<br>
<div id=ps{198} class=mlist_open><a class=mlisthead href=# onClick="return _ts('ps','{198}');blur();"><font color=#3366cc><b>我的资料</b></font></a>
<div class=psc>
<div class=mitem id="n_30="><span class=mname>书签</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_30=');">
</div>
<div class=mitem id="n_20="><span class=mname>Gmail</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_20=');">
</div>
<div class=mitem id="n_31="><span class=mname>搜索历史记录</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_31=');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{199} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{199}');blur();"><font color=#aa0033><b>新闻</b></font></a>
<div class=psc>
<div id=ps{205} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{205}');blur();"><font color=#aa0033><b>Google 新闻</b></font></a>
<div class=psc>
<div class=mitem id="n_24=sec%3D0" style="display:none"><span class=mname>Top Stories</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D0');">
</div>
<div class=mitem id="n_24=sec%3D3"><span class=mname>World</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D3');">
</div>
<div class=mitem id="n_24=sec%3D5"><span class=mname>Business</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D5');">
</div>
<div class=mitem id="n_24=sec%3D6"><span class=mname>Sci/Tech</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D6');">
</div>
<div class=mitem id="n_24=sec%3D1"><span class=mname>Sports</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D1');">
</div>
<div class=mitem id="n_24=sec%3D2"><span class=mname>Entertainment</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D2');">
</div>
<div class=mitem id="n_24=sec%3D8"><span class=mname>Society</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D8');">
</div>
<div class=mitem id="n_24=sec%3D255"><span class=mname>自选新闻</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D255');">
</div>
</div>
<div class=c></div>
</div>
<div class=mitem id="url=http://news.163.com/special/r/00011K6L/rss_newstop.xml"><span class=mname>网易新闻</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://news.163.com/special/r/00011K6L/rss_newstop.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://rss.xinhuanet.com/rss/world.xml"><span class=mname>新华网</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.xinhuanet.com/rss/world.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://rss.sina.com.cn/news/marquee/ddt.xml"><span class=mname>新浪新闻</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.sina.com.cn/news/marquee/ddt.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{200} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{200}');blur();"><font color=#008000><b>财经</b></font></a>
<div class=psc>
<div class=mitem id="url=http://biz.163.com/special/b/00021HSF/bizbignews.xml" style="display:none"><span class=mname>网易商业</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://biz.163.com/special/b/00021HSF/bizbignews.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://rss.xinhuanet.com/rss/fortune.xml"><span class=mname>新华网财经新闻</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.xinhuanet.com/rss/fortune.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{201} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{201}');blur();"><font color=#cc0000><b>科技</b></font></a>
<div class=psc>
<div class=mitem id="url=http://news.chinabyte.com/index.xml"><span class=mname>天极网</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://news.chinabyte.com/index.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://rss.zol.com.cn/news.xml"><span class=mname>中关村在线</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.zol.com.cn/news.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://blog.joycode.com/MainFeed.aspx"><span class=mname>博客堂</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://blog.joycode.com/MainFeed.aspx%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{202} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{202}');blur();"><font color=#ff6600><b>体育</b></font></a>
<div class=psc>
<div class=mitem id="url=http://rss.sina.com.cn/news/allnews/sports.xml" style="display:none"><span class=mname>新浪体育</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.sina.com.cn/news/allnews/sports.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://sports.163.com/special/r/00051K7F/rss_sportszh.xml"><span class=mname>网易体育</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://sports.163.com/special/r/00051K7F/rss_sportszh.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{203} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{203}');blur();"><font color=#669999><b>生活方式</b></font></a>
<div class=psc>
<div class=mitem id="url=http://rss.sina.com.cn/book/culture10.xml"><span class=mname>新浪文化</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.sina.com.cn/book/culture10.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://www.rayli.com.cn/news/0001.xml"><span class=mname>瑞丽</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://www.rayli.com.cn/news/0001.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps{204} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{204}');blur();"><font color=#663399><b>娱乐</b></font></a>
<div class=psc>
<div class=mitem id="url=http://bookmark.hexun.com/rss/hot.xml" style="display:none"><span class=mname>和讯网摘</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://bookmark.hexun.com/rss/hot.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://blog.cnblog.org/index.xml"><span class=mname>CNBlog</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://blog.cnblog.org/index.xml%26val%3D3');">
</div>
<div class=mitem id="url=http://weekly.bokee.com/weekly.xml"><span class=mname>博客</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://weekly.bokee.com/weekly.xml%26val%3D3');">
</div>
</div>
<div class=c></div>
</div>
<div id=ps新增组件 class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','新增组件');blur();"><font color=#aa0033><b>新增组件</b></font></a>
<div class=psc>
<div class=mitem id="n_32=url%3Dchinese_common_search.xml"><span class=mname>地区信息常用搜索</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_32=url%3Dchinese_common_search.xml');">
</div>
<div class=mitem id="n_32=url%3Dchinese_calendar_converter.xml"><span class=mname>公历农历转换</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_32=url%3Dchinese_calendar_converter.xml');">
</div>
<div class=mitem id="n_32=url%3Dchinese_unit_converter.xml"><span class=mname>度量制式转换</span>
<input class=addbtn type=button value="添加 »" onClick="_add_m('n_32=url%3Dchinese_unit_converter.xml');">
</div>
</div>
<div class=c></div>
</div>
<div id=create class=mlist_open><a class=mlisthead href=# onClick="return _ts('create', '');blur();"><font color=#000088><b>创建一个部分</b></font></a>
<div class=psc>
<form onSubmit="return _find_feed()">
<font size=-1>按主题或供稿源网址搜索:</font><br>
<input type=text size=20 id=add_custom>
<input type=submit class=gobtn value="开始">
<br>
<font size=-1><i>例如:健身,时代杂志或engadget.com/rss.xml</i></font>
</form>
<div id=ffresults style="margin-top:5px"></div>
</div>
</div>
</div>
</div>
</td>
<td valign=top width=100%>
<div id=nhdr>
<table class=panelc width=100% cellspacing=0 cellpadding=0 border=0>
<tr>
<td>
<div id=addc class=mod><span class=apromo onClick="return _tp(true)">添加内容</span></div>
</td>
<td>
<div id=gbar>
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
<td align=right nowrap><font size=-1><a href="/url?sa=p&pref=ig&pval=1&q=/webhp">常规主页</a> | <a href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">登录</a></font></td>
</tr>
<tr height=4>
<td><img alt="" width=1 height=1></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script><!--
function qs(el) {if (window.RegExp && window.encodeURIComponent) {var qe=encodeURIComponent(document.f.q.value);if (el.href.indexOf("q=")!=-1) {el.href=el.href.replace(new RegExp("q=[^&$]*"),"q="+qe);}else {el.href+="&q="+qe;}}return 1;}
// -->
</script>
<font size=-3><br>
</font>
<div id=sf>
<table border=0 cellpadding=0 cellspacing=0 align=center width=1%>
<tr>
<td valign=top>
<div id=logo><a href="/search?q=earth+day"><img src=/logos/earthday06_res.gif width=150 height=65 border=0 alt="Earth Day" title="Earth Day" border=0 style="margin-top:5px"></a></div>
</td>
<form style="display:inline" id=sfrm name=f method=GET action=/search>
<td valign=top>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td height=14 valign=bottom>
<div id=tabs>
<script><!--
function qs(el) {if (window.RegExp && window.encodeURIComponent) {var ue=el.href;var qe=encodeURIComponent(document.f.q.value);if(ue.indexOf("q=")!=-1){el.href=ue.replace(new RegExp("q=[^&$]*"),"q="+qe);}else{el.href=ue+"&q="+qe;}}return 1;}
// -->
</script>
<table border=0 cellspacing=0 cellpadding=4>
<tr>
<td nowrap><font size=-1><b>网页</b> <a id=1a class=q href="/imghp?hl=zh-CN&tab=wi" onClick="return qs(this);">图片</a> <a id=2a class=q href="http://news.google.com/nwshp?hl=zh-CN&tab=wn" onClick="return qs(this);">资讯</a> <a id=5a class=q href="http://groups.google.com/grphp?hl=zh-CN&tab=wg" onClick="return qs(this);">论坛</a> <a id=11a class=q href="/dirhp?hl=zh-CN&tab=wd" onClick="return qs(this);">网页目录</a> <b><a href="/intl/zh-CN/options/" class=q>更多 »</a></b></font></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td nowrap align=center>
<div id=sbox>
<input type=hidden name=hl id=hl value="zh-CN">
<input type=text name=q id=q size="55" maxlength=2048 value="">
</div>
<div style="display:inline" id=btng>
<input type=submit value="Google 搜索" name=btnG>
</div>
<div style="display:inline" id=btni>
<input type=submit value="手气不错" name=btnI>
</div>
</td>
<td nowrap valign=top width=150><font size=-2>
<div id=as> <a href=/advanced_search?hl=zh-CN>高级搜索</a></div>
<div id=prefs> <a href=/preferences?hl=zh-CN>使用偏好</a></div>
<div id=lgt> <a href=/language_tools?hl=zh-CN>语言工具</a></div>
</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td colspan=3 align=center><font size=-1>
<input id=all type=radio name=lr value="" checked>
<label for=all>搜索所有网页</label>
<input id=ch type=radio name=lr value=lang_zh-CN|lang_zh-TW>
<label for=ch>搜索所有中文网页</label>
<input id=il type=radio name=lr value=lang_zh-CN>
<label for=il>搜索简体中文网页</label>
</font></td>
</tr>
</table>
<div id=promo></div>
</form>
</div>
<script><!--
/*
if (document.all) {_IG_AddEventHandler("focus",function() {_gel("q").focus();window.onfocus = null;});} else {_gel("q").focus();}// -->
*/
</script>
</div>
<div id=ehdr style="display:none;">
<table cellspacing=0 cellpadding=0 border=0 width=98% style="padding-top:8px;padding-left:5px">
<tr>
<td width=150 nowrap="" valign=top style="padding-right:6px"><img src=http://www.google.com/images/logo_sm.gif alt="Google" border=0 width=150 height=55></td>
<td style="padding-right:8px">
<table width=100% cellpadding=0 cellspacing=4 border=0 style="margin-bottom:12px">
<tr>
<td nowrap colspan=2><b>将您的 Google 主页个性化</b>
<div style="padding-bottom: 5px;"></div>
<font size=-1> •请使用左侧窗格添加内容<br>
•通过拖放重新排列网页</font></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="undel_msg" style="padding:2px 10px;display:none;">
<table bgcolor="#ffff99" align="center" cellpadding=5>
<tr>
<td align="center" nowrap><font size=-1> <b><span id="undel_title"></span> 部分已删除。<a href="javascript:void(_undel())">取消</a></b> </font></td>
</tr>
</table>
</div>
<noscript>
<center>
<br>
<span style="padding:2px;background-color:#fad163;">您需要启动JavaScript 才能使用本网页,</span><br>
</center>
</noscript>
<div id=tip style="padding-top:10px;padding-bottom:7px"></div>
<script>
/*
function _ig_lsb() {if (document.body && document.body.scrollWidth) {var c1w = _gel("c_1").clientWidth;var c2w = _gel("c_2").clientWidth;var c3w = _gel("c_3").clientWidth;var dbw = document.body.scrollWidth;if (c1w > 0.5*dbw) {_xsetp("lsb="+_esc(c1w+"*"+c2w+"*"+c3w+"*"+dbw));}}}
_IG_RegisterOnloadHandler(_ig_lsb);
*/
</script>
<div id=modules>
<table id=t_1 cellspacing=10 border=0 width=98% align=center style="table-layout:fixed;">
<tr>
<td id=c_1>
<div class=unmod style="display:none">
<div class=mpromo><a class=q href=# onClick="return _tp(true)">将您的 <br>
Google 主页个性化</a>
<p>已经个性化?<br>
<a href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">登录</a>
</div>
</div>
<div id=promobox class=mod>
<div class=mpromo>
<table border=0 cellpadding=0 cellspacing=0>
<tr valign=top>
<td align=left style="padding-bottom:3px"><font color=#3366cc><b>保存此页</b></font></td>
<td align=right><a href="#" onClick="_delpromobox()"><img src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr>
<td colspan=2><font size=-1>您可以保存此页并通过<a href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">登录 Google 帐户</a>查看。如果您使用多台计算机或与他人共用一台计算机,我们建议您利用这一功能。您还没有 Google 帐户吗?不妨<a href="https://www.google.com/accounts/NewAccount?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">创建一个</a>。<br>
</font></td>
</tr>
</table>
</div>
</div>
<div id=m_3 class=modbox style="position:relative">
<h2 class=modtitle>
<table class=mhdr cellspacing=0 cellpadding=0>
<tr>
<td id=m_3_h class=mttl><a class=mttli id=m_3_url href="http://sports.sina.com.cn" style="color:#ff6600;">新浪体育</a></td>
<td id=m_3_e class=medit><a href="#" class=el onClick="return _edit('3',null);">编辑</a><a href="#" class=csl onClick="return _cedit('3');">取消</a><a href="#" onClick="return _del('3',25,'url=http://rss.sina.com.cn/news/allnews/sports.xml')"><img alt="删除" src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr class=es>
<td colspan=2 bgcolor=#e5ecf9>
<form id=m_3_form onSubmit="return _fsetp(this,'3',25)">
<div style="padding:5px">
<div style="white-space:nowrap">显示
<select onChange="_uhc('3','val',this.value)">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
项
<input class=submitbtn type=submit value="保存">
</div>
</div>
</form>
</td>
</tr>
</table>
</h2>
<div class=mc><a href="http://sports.sina.com.cn/k/2006-04-24/12572178545.shtml">大郅连线姚明:期待与巨人配合 尽快康复世锦赛见</a></div>
<div class=mc><a href="http://sports.sina.com.cn/o/2006-04-24/07082177692.shtml">新浪对话刘国梁:小组赛力争第一 陈^成为杀手锏</a></div>
<div class=mc><a href="http://sports.sina.com.cn/k/2006-04-24/12422178514.shtml">张博:奥胖与热火一同老去 科比飙分湖人才能胜利</a></div>
</div>
<div class=dm></div>
</td>
<td> </td>
<td id=c_2>
<div id=m_1 class=modbox style="position:relative">
<h2 class=modtitle>
<table class=mhdr cellspacing=0 cellpadding=0>
<tr>
<td id=m_1_h class=mttl><a class=mttli id=m_1_url href="http://news.google.com/news?hl=zh-CN" style="color:#aa0033;">Top Stories</a></td>
<td id=m_1_e class=medit><a href="#" class=el onClick="return _edit('1',null);">编辑</a><a href="#" class=csl onClick="return _cedit('1');">取消</a><a href="#" onClick="return _del('1',24,'n_24=sec%3D0')"><img alt="删除" src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr class=es>
<td colspan=2 bgcolor=#e5ecf9>
<form id=m_1_form onSubmit="return _fsetp(this,'1',24)">
<div style="padding:5px">
<div style="white-space:nowrap">显示
<select onChange="_uhc('1','val',this.value)">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
篇报道
<input class=submitbtn type=submit value="保存">
</div>
</div>
</form>
</td>
</tr>
</table>
</h2>
<div class=mc>
<div><a href="http://www.gmw.cn/content/2006-04/24/content_408754.htm">中国大规模从所罗门撤侨</a></div>
<font color=#6f6f6f>光明网 - </font><a href="http://news.google.com/?ncl=http://www.gmw.cn/content/2006-04/24/content_408754.htm&hl=zh-CN" style="color:green;"><nobr>所有 756 相关报道 »</nobr></a></div>
<div class=mc>
<div><a href="http://pinglun.eastday.com/eastday/node127047/node127048/node127049/node127074/node127076/userobject1ai1999974.html">让阅读成为习惯</a></div>
<font color=#6f6f6f>东方网 - </font><a href="http://news.google.com/?ncl=http://pinglun.eastday.com/eastday/node127047/node127048/node127049/node127074/node127076/userobject1ai1999974.html&hl=zh-CN" style="color:green;"><nobr>所有 232 相关报道 »</nobr></a></div>
<div class=mc>
<div><a href="http://www.njnews.cn/u/ca755339.htm">市领导远赴舟山慰问“南京舰”官兵</a></div>
<font color=#6f6f6f>南京报业 - </font><a href="http://news.google.com/?ncl=http://www.njnews.cn/u/ca755339.htm&hl=zh-CN" style="color:green;"><nobr>所有 773 相关报道 »</nobr></a></div>
</div>
<div class=dm></div>
</td>
<td> </td>
<td id=c_3>
<div id=m_4 class=modbox style="position:relative">
<h2 class=modtitle>
<table class=mhdr cellspacing=0 cellpadding=0>
<tr>
<td id=m_4_h class=mttl><a class=mttli id=m_4_url href="http://biz.163.com/special/m/00020UQ7/mainnews.html" style="color:#008000;">网易商业</a></td>
<td id=m_4_e class=medit><a href="#" class=el onClick="return _edit('4',null);">编辑</a><a href="#" class=csl onClick="return _cedit('4');">取消</a><a href="#" onClick="return _del('4',25,'url=http://biz.163.com/special/b/00021HSF/bizbignews.xml')"><img alt="删除" src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr class=es>
<td colspan=2 bgcolor=#e5ecf9>
<form id=m_4_form onSubmit="return _fsetp(this,'4',25)">
<div style="padding:5px">
<div style="white-space:nowrap">显示
<select onChange="_uhc('4','val',this.value)">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
项
<input class=submitbtn type=submit value="保存">
</div>
</div>
</form>
</td>
</tr>
</table>
</h2>
<div class=mc><a href="http://biz.163.com/06/0424/08/2FF8RND800020QED.html">联通与网通将合并? 3G牌照发放没有时间表</a></div>
<div class=mc><a href="http://biz.163.com/06/0423/02/2FC1VHPC00021T9L.html">[独家]专访黄光裕:董事长和CEO分离的日子不远了</a></div>
<div class=mc><a href="http://biz.163.com/06/0424/10/2FFHP21600020QEP.html">海尔电器4.2亿港元售手机业务 专注发展白色家电</a></div>
</div>
<div id=m_2 class=modbox style="position:relative">
<h2 class=modtitle>
<table class=mhdr cellspacing=0 cellpadding=0>
<tr>
<td id=m_2_h class=mttl><a class=mttli id=m_2_url href="http://bookmark.hexun.com" style="color:#663399;">和讯网摘</a></td>
<td id=m_2_e class=medit><a href="#" class=el onClick="return _edit('2',null);">编辑</a><a href="#" class=csl onClick="return _cedit('2');">取消</a><a href="#" onClick="return _del('2',25,'url=http://bookmark.hexun.com/rss/hot.xml')"><img alt="删除" src=/ig/images/x.gif class=mdel></a></td>
</tr>
<tr class=es>
<td colspan=2 bgcolor=#e5ecf9>
<form id=m_2_form onSubmit="return _fsetp(this,'2',25)">
<div style="padding:5px">
<div style="white-space:nowrap">显示
<select onChange="_uhc('2','val',this.value)">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
项
<input class=submitbtn type=submit value="保存">
</div>
</div>
</form>
</td>
</tr>
</table>
</h2>
<div class=mc><a href="http://bookmark.hexun.com/zhiqiangsky/go.aspx?bid=1412917&type=rss">川菜:重庆水煮鱼做法(图解) [和讯博客]</a></div>
<div class=mc><a href="http://bookmark.hexun.com/pkinghua2004/go.aspx?bid=1412862&type=rss">培养愉快心情的十种方法 [和讯博客]</a></div>
<div class=mc><a href="http://bookmark.hexun.com/billee/go.aspx?bid=1410184&type=rss">博得众人喜爱的28条原则</a></div>
</div>
<div class=dm></div>
</td>
</tr>
</table>
</div>
<center>
<div class=mod style="display:none"><font size=-1>保存此页,即可在其它计算机上使用<a href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1<mpl=default">Google 帐户</a>时查阅。<br>
</font></div>
<br>
<div id=footer align=center style="white-space:nowrap"><font size=-1><a href="/intl/zh-CN/ads/">广告计划</a> - <a href="/intl/zh-CN/help/privacy_fusionph.html">隐私政策</a> - <a href="/support/bin/topic.py?topic=1592&hl=zh-CN">帮助</a> - <a href="/intl/zh-CN/about.html">Google 大全</a></font>
<p><font size=-2>©2006 Google</font>
</div>
</center>
</td>
</tr>
</table>
<script>
<!--
//google的页面里可以拖动的部分的id是"t_1"
_table=document.getElementById("t_1");
//挂载到onload,载入完毕执行。不过实际上google没有用onload。
//而是写在页面最下面,异曲同工吧,也许直接写在页面是种怪癖,或者也有可能是兼容性考虑。
//行了,你可以自己下载一个google ig的页面了,把里面的所有script删除挂上这个js也可以拖拽了,哈哈
//其实看懂这些代码对学习javascript很有益,希望对大家能有帮助
window.onload = _IG_initDrag(_table);
-->
</script>
</body>
</html>
评论: 0 | 引用: 0 | 查看次数: -
发表评论
上一篇
下一篇

文章来自:
Tags: