许愿墙模块功能分析
一，热点技术
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 "
<DIVstyle='left:".$L."px;top:".$T."px;z-index:".$Z."' onmousedown='Move(this,event)' ondblclick=Show(".$id.",'shadeDiv')>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=shead>
<span >爱墙编号:".$id." ".$sendtime." <a>×</span>
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV class=sbody><img src='"https://www.jb51.net/article/.$face."'>
<span>".$Picker."</span><br> <span>$content</span>
</DIV>
<DIV class=sbody >
<H2><span>".$author."</span></H2>
</DIV>
<DIV class=sbot>
<br><a href='#''>[祝福你]</a> 福气:<span>".$hits."</span> <span>QQ：<a href='http://wpa.qq.com/msgrd?uin=".$QQ."&Site=1&Menu=yes' title='单击与他/她交谈' target='_blank'>".$QQ."</a></span>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>";
当按下鼠标左键时，应用鼠标时间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
复制代码 代码如下: