深入PHP许愿墙模块功能分析
2024-05-04 22:25:13
供稿：网友
许愿墙模块功能分析
一，热点技术
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 "
<DIV class='".$pagecolor."'style='left:".$L."px;top:".$T."px;z-index:".$Z."' id='".$id."' onmousedown='Move(this,event)' ondblclick=Show(".$id.",'shadeDiv')>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=shead>
<span class='Num' >爱墙编号:".$id." ".$sendtime." <a onclick='myClose(".$id.")'>×</span>
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'>
<span id='PickerSample'>".$Picker."</span><br> <span id='ContentSample'>$content</span>
</DIV>
<DIV class=sbody >
<H2><span id='authorSample'>".$author."</span></H2>
</DIV>
<DIV class=sbot align='right'>
<br><a href='#' onclick='holdout(".$id.",".$hits.")''>[祝福你]</a> 福气:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a href='http://wpa.qq.com/msgrd?uin=".$QQ."&Site=1&Menu=yes' title='单击与他/她交谈' target='_blank'>".$QQ."</a></span>
