首页导航栏
-
网络工程
|
网站建设
|
设计在线
|
精彩图片
|
职业前线
|
创业之路
|
启步工具
|
教程资讯
|
休闲娱乐
启步网
>
网站建设
>
网站编程
GOOGLE个性主页-页面元素拖拽实例系列（一）
作者： 周飞 阅读： 来源：
启步网
时间：2007-1-28 18:51:50
字体
：
小
中
大
先看效果图，实际体验请运行下面代码框：）
基本上MSN、MicroSoft Live 和GOOGLE个性主页 元素可拖动并放置的的实现原理就是对DOM的操作再加上JAVASCRIPT拖动元素。实现起来实际上并不难，但是要做到很美观并符合用户习惯就需要一些时间思考了。
以下代码实现了上述功能，虽然很简单，但是基本上说明了原理。实现更高级的功能当然还需要改进。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>启步网专题：GOOGLE个性主页-页面元素拖拽实例系列（一）</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <style type="text/css"> div { border-right: lightgrey thin solid; border-top: lightgrey thin solid; font-weight: bold; z-index: 2; text-transform: capitalize; border-left: lightgrey thin solid; color: white; border-bottom: lightgrey thin solid; background-color: dimgray; } </style> </head> <body> <div id="parentDiv" class="parentCss" style="width:100"> <div class="itemCss" onmouseover="InsertDiv(this)">one 1</div> <div class="itemCss" onmouseover="InsertDiv(this)">two 2</div> <div class="itemCss" onmouseover="InsertDiv(this)">three 3</div> <div class="itemCss" onmouseover="InsertDiv(this)">four 4</div> <div class="itemCss" onmouseover="InsertDiv(this)">five 5</div> <div class="itemCss" onmouseover="InsertDiv(this)">six 6</div> <div class="itemCss" onmouseover="InsertDiv(this)">seven 7</div> <div class="itemCss" onmouseover="InsertDiv(this)">eight 8</div> <div class="itemCss" onmouseover="InsertDiv(this)">nine 9</div> <div class="itemCss" onmouseover="InsertDiv(this)">ten 10</div> </div> <script language="javascript"> <!-- var obj,obj2; //引发事件对象 var rootNode; //控制对象根节点 var IsDrag=false; //是否抓起 var NullDiv; //空临时层 var x,y; //鼠标与控件的相对坐标 window.onload = Prepare; //窗体加载时委托到Prepare function Prepare() { //生成临时层，并设置其属性 NullDiv = document.createElement("div"); //获得控制对象的根节点元素 rootNode = document.getElementById("parentDiv"); document.onmousemove=MoveIt; //当鼠标在文档上移动时事件委托到MoveIt document.onmousedown=Drag; //当鼠标按下时事件委托到Drag document.onmouseup=Release; //当鼠标释放台起时事件委托到Release } function Drag() { obj = event.srcElement; x=0;//event.offsetX; y=0;//event.offsetY; obj.style.position='absolute'; obj.style.posTop=event.y-y; obj.style.posLeft=event.x-x; IsDrag=true; } function MoveIt() { //window.status = event.x+"|"+event.y+"|"+IsDrag+"|"+x+"|"+y; if(IsDrag) { obj.style.posTop=event.y-y; obj.style.posLeft=event.x-x; } } function Release() { IsDrag=false; NullDiv.style.display='none'; obj.style.position=''; rootNode.insertBefore(obj,obj2); } function InsertDiv(o) { if(IsDrag) { obj2=o; NullDiv.style.display=''; NullDiv.style.height='18'; NullDiv.style.width='100'; rootNode.insertBefore(NullDiv,obj2); } } //--> </script> </body> </html>
运行代码
复制代码
另存代码
收藏本页
更多资源查看专题：
Web页面元素拖拽实例系列
责任编辑：一路狂奔
帐号：
密码：
全网
本站
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个性化主页,实现Web桌面托拽的实例
[2007-1-28]
千万数量级分页存储过程实例
[2007-1-28]
自己开发的自定义分页控件
[2007-1-28]
JS+ASP打造无刷新新闻列表
[2007-1-26]
适合网站设计的运行代码功能
[2007-1-24]
关于我们
|
网站地图
|
联系我们
|
更多链接
|
隐私声明
|
版权声明
- 