实现Google个性化首页模块拖拽功能

5星 · 超过95%的资源需积分: 9 132 浏览量更新于2024-09-19 收藏 7KB TXT 举报

"该资源是关于实现一个类似Google个性化首页的模块拖拽功能的示例代码。用户可以随意拖动页面上的模块，并让它们在松开鼠标时停留在所选位置。" 在这段代码中，主要涉及了HTML、CSS以及JavaScript三个部分，用于创建一个具有拖放功能的布局。首先，HTML部分定义了页面的基本结构，包括几个不同宽度的div（内容区域）：left、center和right。每个div都有边框和内边距，以便区分不同的模块区域。 CSS部分主要用于设置页面和模块的样式。body设置了无边距和无填充，整体居中对齐。`.content`类定义了一个宽度为900px的中央内容区域，包含三个浮动的子div：`.left`、`.center`和`.right`，分别用于展示左侧、中间和右侧的模块。`.mo`类代表模块，有自定义的边框、内边距和背景色。`.moh1`是模块头部的样式，提供了一个可拖动的提示，而`.mo.nr`则是模块内容区域的样式。 JavaScript部分是实现拖放功能的核心。`dragobj`对象被用来存储拖放操作的状态。全局的`onerror`函数处理错误，避免错误导致程序中断。在未提供的代码片段中，可能包含了鼠标按下、移动和释放事件的监听器，以实现模块的拖动效果。`h1`中的`span`和`font`元素可能分别用于显示模块标题和提供关闭按钮，`cursor:pointer`使得关闭按钮看起来可点击。拖放功能的实现原理通常包括以下步骤： 1. 首先，当鼠标按下时，记录模块的初始位置和鼠标的位置。 2. 鼠标移动时，计算鼠标与模块初始位置的偏移量，更新模块的位置。 3. 鼠标释放时，停止更新模块位置，模块将在当前位置停留。这段代码提供了一个基础的拖放模块实现，但可能还需要完善如边界检测（防止模块移出容器）、模块重叠处理等高级功能。此外，实际应用中，可能还需要考虑浏览器兼容性和性能优化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body {margin:0px;padding:0px;font-size:12px;text-align:center;}
body > div {text-align:center; margin-right:auto; margin-left:auto;}
.content{width:900px;}
.content .left{
float:left;
width:200px;
border:1px solid #FF0000;
margin:3px;
}
.content .center{float:left;border:1px solid #FF0000;margin:3px;width:470px}
.content .right{float:right;width:200px;border:1px solid #FF0000;margin:3px}
.mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF}
.mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move}
.mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px}
h1{margin:0px;padding:0px;text-align:left;font-size:12px;height:20px}
h1 span{float:left}
h1 font{float:right;cursor:pointer}
</style>
<script>
var dragobj={}
window.onerror=function(){return false}
window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
var domid=12
function on_ini(){
String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}

剩余6页未读，继续阅读

johnny0316

粉丝: 1
资源: 10

实现Google个性化首页模块拖拽功能

仿Google首页的模块拖动效果源码

模块定制(类似于google个性主页的拖拽功能 )

JS仿iGoogle自定义首页模块拖拽特效的方法

类似Google个性首页的页面自定义拖拽布局

网页拖拽效果

可以自由拖动的div ,类似于igoogle个性化首页

igoogle实现拖拽效果

Google个性主页拖拽效果JavaScript源码详解及注释

JS实现iGoogle模块拖拽特效详解

仿iGoogle的界面

最新资源