深入PHP许愿墙模块功能分析

深入PHP许愿墙模块功能分析

许愿墙模块功能分析
一，热点技术
1，实现可拖放DOM技术移动许愿字条
可拖放DOM模式(Draggable DOM pattern)的宗旨在于允许浏览者自己定义页面中各元素的位置，并且，只需要用鼠标选中要移动的部分，把它拖到新的位置上，就可以定制页面。

DOM是Document Object Model文档对象模型的缩写，是一种与浏览器、平台、语言无关的接口，使用户可以访问页面其他的标准组件。DOM是以层次结构组织的节点或信息片段的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档的构造层次结构，然后才能做任何工作。由于它基于信息层次，因此DOM被认为基于树或基于对象。
具体实现时以下时间会被触发：
(1)moveStart
(2)Move
(3)moveEnd
当按下鼠标左键，开始移动鼠标时，在被拖动的许愿条上就会触发moveStart事件。用户可以使用moveStart事件处理函数在拖动开始时允许javaScript代码。当moveStart事件被触发后，Move时间会一直触发，只要对象还在被拖动，就一直触发。当拖动停止时，则触发moveEnd事件。
echo输出许愿条样式布局，代码如下：
代码如下:
echo "

爱墙编号:".$id." ".$sendtime." ×

".$Picker." $content ".$author." [祝福你] 福气:".$hits." QQ：".$QQ."

";

当按下鼠标左键时，应用鼠标时间onmousedown触发Move()函数
代码如下:
var Layer='';
document.onmouseup=moveEnd;
document.onmousemove=moveStart;
var b;
var c;
function Move(Object,event){ //移动DIV许愿字条
Layer=Object.id;
if(document.all){
document.getElementById(Layer).setCapture();
b=event.x-document.getElementById(Layer).style.pixelLeft; //设置左边框
c=event.y-document.getElementById(Layer).style.pixelTop; //设置右边框
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
b=event.layerX; //返回时间对象相对于本体的横坐标
c=event.layerY; //返回时间对象相对于本体的纵坐标
}
/**实现鼠标单击字条时，字条置上**/
document.getElementById(Layer).style.zIndex=iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
/********************************/
}

document.all是文档中所有标签组成的一个数组变量，包括了文档对象中的所有元素，这个数组可以访问文档中的所有元素。
语法：
document.all[i]
document.all[name]
document.all.tags[tagname]
说明：
all[]是一个多功能的类似数组的对象，它提供了对文档中所有HTML元素的访问。all[]数组源自于IE4并已经被很多其他浏览器采用

all[]已经被Document接口的标准的getElementById()方法和getElementByTagName()方法以及Document对象的getElementByName()方法所取代。

all[]包含的元素保存了最初的顺序，如果你知道他们在数组中的确切数字化位置，可以直接从数组中提取他们。然而，更为常见的是使用all[]数组，根据他们的HTML属性name或id来访问元素。如果元素拥有指定的name,将得到共享同一名称的元素的一个数组。
document.all可以判断浏览器是否是IE
代码如下:
if(document.all){
alert("is IE!");
}

window.captureEvents()
window.captureEvents(event1 | event2 | eventN)
captureEvents()方法捕获所有发生的事件类型，如果有多个事件发生，则用|竖线隔开；captureEvents()方法主要事件如下：
Event.ABORT
Event.BLUR
Event.CHANGE
Event.CLICK
Event.DBLCLICK
Event.DRAGDROP
Event.ERROR
Event.FOCUS
Event.KEYDOWN
Event.KEYPRESS
Event.KEYUP
Event.LOAD
Event.MOUSEDOWN
Event.MOUSEMOVE
Event.MOUSEOUT
Event.MOUSEOVER
Event.MOUSEUP
Event.MOVE
Event.RESET
Event.RESIZE
Event.SELECT
Event.SUBMIT
Event.UNLOAD
示例代码：
代码如下: