JavaScript实现仿Google个性化主页的页面布局拖拽效果

拖拽效果概述与演示

本文介绍基于JavaScript实现的Google IG Drag Demo拖拽效果，该效果表现优秀，计划应用于F2Blog新主题后台的模块设置功能中，涉及模块间的相互拖拽操作。

关于拖拽的具体操作细节，

拖拽效果的页面演示地址为：http://img.jb51.net/online/tuozhuai/google_drag.htm

加强版效果的演示地址为：http://img.jb51.net/online/tuozhuai/google_drag2.htm

拖拽核心原理

拖拽的核心原理如下：

关于拖拽的基础知识，可参考相关文章，讲解十分详尽。

其基本原理并不复杂，主要涉及绑定三个事件：onmousedown、onmousemove和onmouseup。

当鼠标按下时（onmousedown），将元素的坐标设置为当前鼠标坐标，并将position属性设置为absolute（绝对定位）。

当鼠标移动时（onmousemove），动态改变元素的坐标位置。

当鼠标弹起时（onmouseup），取消绑定的事件，并执行后续操作。

代码结构与实现细节

以下是仿Google个性化主页拖拽效果的Demo代码（需引入prototype库）。完整下载包：Google

Drag.rar（19.82 KB，下载次数：247次）

该示例总共包含四个文件：

google_drag.html

prototype.js

通用拖拽函数 drag.js

仿Google个性化主页的拖拽逻辑 google_drag.js

在google_drag.html文件的最后几行中，包含一个初始化拖拽函数的调用。

window.onload = function(){initDrag();}

必须采用上述写法，如果直接写成

window.onload = initDrag();

则在IE浏览器下会报错：尚未实现。

其他代码可直接查看源码，仅有少量注释。其核心逻辑是使用JavaScript动态生成15个div元素，

并将它们的class属性统一设置为drag_div（后续通过className判断元素是否具备拖拽功能），

同时将可拖拽部分的ID设置为原元素ID后加_h（也可自定义为其他标识作为拖拽区域）。

drag.js是一个较为通用的拖拽函数库，内部包含四个基础函数：start_Drag、when_Drag、end_Drag和

after_Drag。这四个函数实现了最基本的拖拽功能，如需其他功能，可修改或覆盖这些函数。

google_drag.js则是仿照Google个性化主页拖拽效果的函数实现。它覆盖了前述四个函数，

实现了更为高级的视觉效果。

数据持久化与优化建议

拖拽功能的实现相对简单，完成拖拽后，需使用Ajax传递拖拽后的位置信息，

从而更新服务器端的值，

这样用户下次访问时，元素位置才能保持不变。效果本身的实现非常直观，重点在于如何将其融合到现有项目中，以提升用户体验。

该Demo部分参考了网络上的现有代码。

网络上存在许多类似示例，但感觉效率均不如本例高。部分示例将所有元素位置设置为

absolute，然后直接修改各元素的top和left属性来显示效果，感觉不够通用。例如，若要将其修改为数字拖拽，

并记录各个元素之间的相对位置，处理起来较为繁琐。本例中要记录元素的位

置，只需在拖拽完成后记录被拖拽元素的id以及其最终停留在哪个元素的前面，然后传给服务器端进行修改即可

实现持久化。

加强版功能更新

Update 2007-01-26 1:22

增加了一个加强版，效果请参阅Demo。主要增加了一个函数，确保左上角的大块区域只会有一个元素，如

果该区域元素超过一个，则将多余元素挤到下面的第一列；如果没有元素，则从下面的第一列取出第一个元素放入左上方

的大块中；如果下面的第一列没有元素，则依次查找第二列、第三列。