首页导航栏 - 网络工程 | 网站建设 | 设计在线 | 精彩图片 | 职业前线 | 创业之路 | 启步工具 | 教程资讯 | 休闲娱乐
启步网 > 网站建设 > 网站编程
类似Google个性化主页,实现Web桌面托拽的实例
作者: sunhy 阅读: 来源:启步网 时间:2007-1-28 11:08:21
字体
 
    在浏览网页的过程经常看到Web桌面托拽的效果,是不是觉得很酷啊?
    我第一次登录google的时候,被它的 个性化主页  是深深吸引住了。
你可以:
·添加标签
·添加内容
·并可自定义类别
·自由拖拽
 
    在研究了一段时间后,发现Mark Kahn写了与这相关的实例。Mark Kahn是一个web开发者与DBA.你可以访问他的主页http://www.jslibrary.org 下面是我经过整理,并从中提取了完整的代码,与大家共享:)
    请自己动手试试看^_^ 

Demo - Drag and Drop any item

Item #1
Item #2
Item #3
Item #4
Item #5
Item #6
Item #7
Item #8
Item #9
Item #10
Item #11
Item #12
History
Item5: Mouse Over Fired
Item5: Mouse Out Fired
Item10: Mouse Over Fired
Item10: Mouse Out Fired
Item11: Mouse Over Fired
Item11: Mouse Out Fired
Item12: Mouse Over Fired
Item12: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
Item9: Mouse Over Fired
Item9: Mouse Out Fired
Item12: Mouse Over Fired
Item12: Mouse Out Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Down Fired
ListItem2: Mouse Out Fired
Demo - Drag and Drop any item
  1. Item #1
  2. Item #2
  3. Item #3
  4. Item #4
  5. Item #5
 

Demo - Drag and Drop any item

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

完整代码如下,可直接运行,或先修改代码再运行


 

责任编辑:一路狂奔
帐号:
密码:

Google
Google提供的相关资源
参与评论(条评论)
请遵守国家法律
笔名:
邮箱:
( 以上评论仅代表网友个人意见,不代表本站观点 )
相关资源
  • Web页面托拽 JavaScript Drag Demo 实例 [2007-1-28]
  • JavaScript Google IG Drag Demo [2007-1-28]
  • 怎么用javascript进行拖拽 [2007-1-28]
  • GOOGLE个性主页-页面元素拖拽实例系列(二) [2007-1-28]
  • Web页面元素拖拽实例系列—专题篇 [2007-1-28]
  • GOOGLE个性主页-页面元素拖拽实例系列(一) [2007-1-28]
  • 千万数量级分页存储过程实例 [2007-1-28]
  • 自己开发的自定义分页控件 [2007-1-28]
  • JS+ASP打造无刷新新闻列表 [2007-1-26]
  • 适合网站设计的运行代码功能 [2007-1-24]
  •