带模块编辑功能拖拽效果实现

2008-12-31 19:45:57 | 【大中小】

本脚本实现了在网页上自由拖拽，很多博客系统的主页都采用的这种形式，本脚本效果非常好，每一个模块都可以自定义是否可以拖动，是否可以编辑，最大化，最小化等功能，不可多得！

程序设置
服务器端脚本
本脚本要求有服务器端程序支持才能做相关保存，您可以根据需求改写。

下载压缩包
点击这里下载全部源代码的压缩包
压缩包内包含以下文件
dragable-boxes.html = 主HTML文件
css/dragable-boxes.css = 外观样式
js/dragable-boxes.js = 主JavaScript脚本文件
js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack)
readRSS.php = 读取Rss的服务器端程序. 通过 dragable-boxes.js 内的ajax读取
magpierss/* = RSS parser download from http://magpierss.sourceforge.net/
images/* = 图片文件夹

外观
整体外观依靠 css/dragable-boxes.css 文件定义.样式表内有详细的注释说明，可以参考修改
所有的可拖拽模块都放在 "floatingBoxParentContainer"的div内. 如:

<div id="floatingBoxParentContainer">
</div>

创建RSS模块
在dragable-boxes.js 文件中, 有下面这个函数

/* You customize this function */
function createDefaultBoxes()
{
  createARSSBox('http://rss.cnn.com/rss/cnn_topstories.rss',2,false,5,1);  
       createARSSBox('http://feeds.feedburner.com/reuters/topNews/',3,false,5);  
       createARSSBox('http://rss.news.yahoo.com/rss/world',3,false,5);      
  createARSSBox('http://rss.pcworld.com/rss/latestnews.rss',1,false,5);    
     createARSSBox('http://www.w3.org/2000/08/w3c-synd/home.rss',1,false,5,30);  
       
}

这个函数用来建立默认RSS模块. :

function createARSSBox(url,columnIndex,heightOfBox,maxRssItems,minutesBeforeReload)

该函数的参数定义如下：

url = rss地址(example: http://www.dhtmlgoodies.com/rss/dhtmlgoodies.xml)
columnIndex = 模块要放置在哪一列. 如“1”表示放在第一列
heightOfBox = 你可以指定Rss模块的高度为一个固定值.如：150 表示150个像素的高度. 如果希望自适应高度输入false
maxRssItems: RSS模块最多有多少个.
minutesBeforeReload: 指定多少分钟后自动重新加载Rss.
注意：此函数只在Cookie中没有保存rss的情况下有用

通过HTML创建模块
你可以通过 createDefaultBoxes函数创建一个静态模块. 范例如下:

/* Create static boxes */

var htmlContentOfNewBox = '<DIV>Content of static box.</div>'
var titleOfNewBox = 'This is a static box';
if(!staticObjectArray['staticObject1']){
  var newIndex = createABox(1,100,false,'staticObject1');
  document.getElementById('dragableBoxContent' + newIndex).innerHTML = htmlContentOfNewBox;
  document.getElementById('dragableBoxHeader_txt' + newIndex).innerHTML = titleOfNewBox; 
}else{ 
  document.getElementById('dragableBoxContent' + staticObjectArray['staticObject1']).innerHTML = htmlContentOfNewBox;  
  document.getElementById('dragableBoxHeader_txt' + newIndex).innerHTML = titleOfNewBox; 
}

createABox 函数有四个参数，按顺序解释如下：

列编号(1 = 第一列, 2 = 第二列)
模块高度，如果希望自适应高度，输入false
false = 不要Rss
Unique ID = 模块的ID，必须保证唯一
最后一个参数是模块的内容

注意，静态模块是不能删除的.各个模块的位置保存在cookie里

Javascript 变量设置
dragable-boxes.js 文件里有一些JavaScript变量需要设置：

var numberOfColumns = 3;
var columnParentBoxId = 'floatingBoxParentContainer';
var src_rightImage = 'images/arrow_right.gif';
var src_downImage = 'images/arrow_down.gif';
var src_refreshSource = 'images/refresh.gif';
var src_smallRightArrow = 'images/small_arrow.gif';

var transparencyWhenDragging = false;
var txt_editLink = 'Edit';
var txt_editLink_stop = 'End edit';
var autoScrollSpeed = 4;
var dragObjectBorderWidth = 1; 
var useCookiesToRememberRSSSources = true;
var nameOfCookie = 'dragable_rss_boxes'; // Name of cookie 
numberOfColumns = Number of columns for your RSS boxes

各个参数含义如下：
columnParentBoxId = 根DIV的ID
src_rightImage = RSS模块的有箭头图片路径
src_downImage = RSS模块中下箭头路径
src_refreshSource = RSS模块中刷新按钮的图片路径
src_smallRightArrow = RSS模块中左边小箭头的图片路径.
transparencyWhenDragging = 如果设置为True模块拖拽时会变成透明.
txt_editLink = 编辑链接的标题.
txt_editLink_stop = 结束编辑链接的标题.
autoScrollSpeed = 模块拖到浏览器最上面或者最下方出现滚动条后，滚动条滚动的速度，值越大越快
dragObjectBorderWidth = 拖动模块的边框宽度
nameOfCookie = 用于存储的cookie名

恢复默认设置
resetDragableBoxes函数用于还原各个模块的位置,可以通过以下形式调用

<A href="#" onclick="resetDragableBoxes();return false">Reset back to default</A>

下载"带模块编辑功能拖拽效果实现"

推荐给朋友

上一篇： JavaScript拖拽给网页布局效果，酷
下一篇： javascript实现可以自由拖动的树形列表

带模块编辑功能拖拽效果实现

下载"带模块编辑功能拖拽效果实现"

相关资源