许愿墙模块功能分析一、热点技术1、拖拽DOM技术移动许愿笔记拖拽DOM模式旨在让查看者自己定义页面中每个元素的位置，只需用鼠标选择要移动的部分，拖拽到新的位置，即可自定义页面。DOM是文档对象模型的缩写。它是一个独立于浏览器、平台和语言的界面，使用户能够访问页面的其他标准组件。DOM是以层次结构组织的节点或信息片段的集合。这种层次结构允许开发人员在树中导航以查找特定信息。分析这个结构通常需要在做任何工作之前加载整个文档的结构层次。因为它是基于信息层次的，所以DOM被认为是基于树或基于对象的。具体实现时会触发以下时间：(1)moveStart(2)Move(3)moveEnd当鼠标左键被按下，鼠标开始移动时，在被拖动的许愿条上会触发moveStart事件。用户可以使用moveStart事件处理程序在拖动开始时允许javaScript代码。当MoveStart事件被触发时，移动时间始终被触发，只要对象还在被拖动，就始终被触发。当拖动停止时，会触发移动结束事件。Echo输出带有以下代码的许愿条样式布局：复制代码如下： echo 'div class=' '。$ pagecolor。style=' left: '。$ l . px；top :’。$ t . px；z-index :’。$Z.'' id=' '。$id。onmousedown='Move(this，event)' on blclick=Show('。$id。' shadeDiv ')表格单元格间距=0单元格填充=0边框=0 tbodytrddiv class=shead span class=' num ' love wall number :$ id。''.$发送时间。a onclick=' my close('。$ id。)'/span/DIV/TD/TRTDDIV class=sbodymg src=' '。$face。id=' IconImg ' style=' float : left ' span id=' PickerSample ' '。$Picker。/span brspan id=' content sample ' $ content/span/div div class=sbody H2 SPan id=' AuthorSample '。$作者。/span/H2/DIVIDIV class=sbot align=' right ' bra href=' # Onlick=' holdout '(。$ id。'.$点击量。)' '[祝福你]/a付琪： pan id=' FQ _ id '。$ id。$点击量。/span span id=' QQ sample ' QQ:a . Uin='。$ QQ 'site=1menu=yes' title='单击与他/她交谈' target=' _ blank ' '。$ QQ。/a/span/div/TD/tr/t body/table/div '；当按下鼠标左键时，应用鼠标时间onmousedown触发Move()函数复制代码如下：var Layer=document.onmouseup=moveEnddocument . onmousemove=move start；风险值b；风险值c；函数Move(Object，event){//move DIV许愿笔记Layer=Object.idif(document . all){ document . getelementbyid(Layer)。setCapture()；b=event . x-document . getelementbyid(Layer). style . pixelleft；//设置左边框c=event . y-document . getelementbyid(layer . style . pixlotp；//设置右边框} else if(window . capture events){ window . capture events(event . mouse move | event . mouse up)；b=event.layerX//返回时间对象相对于本体的横坐标c=event.layerY//返回时间对象相对于本体的纵坐标}/* *鼠标点击笔记时，笔记放置在* */document . getelementbyid(layer . style . zindex=ilayer maxnum；以色列