CN103870558A - 页面渲染方法和遮罩层创建方法 - Google Patents

Abstract

本申请提供了一种图片元素显示方法和装置，涉及网络技术领域。本申请的方法包括：当侦听到鼠标开始拖拽动作时，添加遮罩层，并在遮罩层创建被拖拽的第一图片元素对应的第二图片元素；所述第二图片元素为包括第一图片元素内容数据的图标；获取鼠标移动过程中的坐标，将所述第二图片元素的坐标随所述鼠标移动过程中的坐标改变而改变；当侦听到鼠标弹起时，隐藏所述遮罩层，根据鼠标弹起时所指第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换；将交换后得到的图片元素进行重新渲染显示。本申请减少了回流的次数，即需要重新计算位置的元素的个数，从而也减少了重绘的次数，降低了系统资源占用率，也降低了CPU的使用率。

Description

页面渲染方法和遮罩层创建方法

本发明专利申请是申请日为2012年3月29日、申请号为201210089585.X、名称为“一种图片元素显示方法和装置”的中国发明专利申请的分案申请。

技术领域

本申请涉及网络技术领域，特别是涉及一种图片元素显示方法和装置。

背景技术

RIA（Rich Internet Applications）富互联网应用,具有高度互动性、丰富的用户体验以及强大的功能。丰富的界面元素：RIA技术提供了比HTML更为丰富的界面表现元素，密集、响应速度快和图形丰富的图片元素与数据模型结合在一起，为用户提供好的使用体验。在RIA中，一般是结合页面脚本（Javascript）操作页面的文档对象模型树元素，使图片元素可以运动。

而在浏览器中，对于页面的呈现流程如图1，浏览器从HTML Source（HTML资源，其中HTML为：Hypertext Markup Language Source，超文本标记语言）中解析出DOM Tree（文档对象模型树），从CSS（Cascading StyleSheet，级联样式表）中解析出级联样式表对应的样式结构体后，构建出RenderTree（呈现树），然后浏览器根据Render Tree绘制页面进行显示。在构建过程中，浏览器会将文档对象模型树中的元素逐个放入级联样式表对应的样式结构体中相应的级联样式表位置，然后进行构建。其中文档对象模型树主要决定图片元素的呈现内容，级联样式表对应的样式结构体主要决定图片元素呈现的位置。但是当Render Tree中的一部分（或全部）因为Render Tree元素的规模尺寸、布局等改变时，需要重新构建Render Tree；或者一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如背景颜色；那么就会引起浏览器重新渲染页面，一般称上述两种方式为回流和重绘。特别是，如果某个图片元素位置改变，那么对于文档对象模型树中该元素对应的位置之后的位置对应的元素，需要重新回流，计算位置，并进行元素样式的重绘。而在这个过程中，回流的成本远远高于重绘的成本。

在RIA中，存在一个拖拽动作，拖拽是RIA的一个重要组成，主要用来改变页面构成和布局，根据拖拽组合完成特定语义的操作，比如交换两个元素的位置等。

现有技术中，进行拖拽时，通常的实现过程是，添加鼠标侦听事件，当有效交互区域内捕捉到鼠标点击事件时，拖动过程开始，添加侦听鼠标移动事件，每次触发鼠标移动事件时，就将被拖拽元素通过设置CSS绝对位置的方式移动到鼠标当前位置，当鼠标弹起，做拖动结束的处理。由前述浏览器渲染过程可知，由文档对象模型树的内容放置在相应的级联样式表位置中构建呈现树，那么在上述拖拽过程中，是将某个元素所在的级联样式表位置和其内容一起进行拖动，其中CSS的坐标跟随鼠标移动的坐标进行变化，而级联样式表位置的变化，那么根据浏览器的渲染规则，会导致页面的回流或重绘，浏览器需要重新计算该元素及文档对象模型树中该元素之后所有元素的在浏览器中的新位置，并基于新位置进行样式渲染，计算和渲染的负荷大，系统资源占用严重，CPU（Central Processing Unit，中央处理器）使用率高，影响系统其他程序正常运行。

发明内容

本申请所要解决的技术问题是提供一种图片元素显示方法和装置，解决现有技术中拖拽过程中，浏览器对于文档对象模型树中，在被拖拽对象所在位置之后的所有可被拖拽的元素均需要重新回流，重新计算其位置，并进行渲染的过程，从而导致计算和渲染的负荷大，系统资源占用严重，CPU（Central Processing Unit，中央处理器）使用率高，影响系统其他程序正常运行的问题。

为了解决上述问题，本申请公开了一种网页中图片元素显示方法，包括：

侦听页面显示区域中第一图片元素的拖拽动作开始，添加遮罩层；其中所述遮罩层添加在页面文档对象模型树中最后一个元素位置之后，所述遮罩层置于顶层，所述遮罩层覆盖的区域包括页面显示的区域；

在遮罩层创建与被拖拽的第一图片元素对应的第二图片元素，所述第二图片元素包括第一图片元素的内容数据中的图片；

侦听第二图片元素的拖拽移动，根据拖拽移动设置所述第二图片元素的位置；

侦听页面显示区域中第一图片元素的拖拽动作结束，隐藏所述遮罩层，根据拖拽动作结束处的第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换；

在所述页面显示的区域中仅渲染被交换的第一图片元素和第三图片元素。

优选的，侦听页面显示区域中第一图片元素的拖拽动作开始，添加遮罩层，在遮罩层创建与被拖拽的第一图片元素对应的第二图片元素的步骤包括：

侦听到鼠标拖拽动作开始，获取第一图片元素的级联样式表位置数据、文档对象模型树结构数据、和文档对象模型树结构中的内容数据；

依据所述级联样式表位置数据和文档对象模型树结构数据在所述遮罩层中创建与第一图片元素对应的第二图片元素；

将所述文档对象模型树结构中的内容数据依据文档对象模型树结构形式设置到所述第二图片元素。

优选的，添加所述遮罩层的步骤包括：

预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构；

在级联样式表对应的样式结构体中设置遮罩层的覆盖区域为所述页面显示的区域。

优选的，预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构时包括：

在文档对象模型树的主干尾端添加对应遮罩层的div。

优选的，预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构时包括：

在文档对象模型树各放置各可拖拽元素所在子div的最后一个父div之后，添加对应遮罩层的div，并将其属性设置为顶层div。

优选的，所述侦听页面显示区域中第一图片元素的拖拽动作结束，隐藏所述遮罩层步骤包括：

删除所述遮罩层中创建的第二图片元素。

优选的，根据拖拽动作结束处的第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换包括：

侦听到拖拽动作结束，若所在区域对应的第三图片元素对应的文档对象模型树结构中存在内容数据时，获取第三图片元素对应的文档对象模型树结构中的内容数据；

保持第一图片元素和第三图片元素的级联样式表位置和文档对象模型树结构不变，并将第一图片元素对应文档对象模型树结构中的内容数据与第三图片元素对应文档对象模型树结构中的内容数据互换。

优选的，所述侦听页面显示区域中第一图片元素的拖拽动作开始步骤包括：

侦听到鼠标按下时，判断鼠标按下区域是否属于有效区域；如果是，则侦听到鼠标是否开始移动，如果是，则加载所述遮罩层。

优选的，进一步包括：

判断拖拽动作结束处拖拽鼠标所在区域是否在第三图片元素所在区域的预定范围内；

如果是，确定所述拖拽动作结束处拖拽鼠标所在区域的图片元素为第三图片元素。

优选的，所述遮罩层覆盖于以绝对布局方式构建的图片元素之上；

和/或，所述遮罩层覆盖于以流式布局方式构建的图片元素之上。

优选的，所述绝对布局方式构建的图片元素包括九宫格形式的图片元素、和/或十二宫格的图片元素。

相应的，本申请公开了一种图片元素显示装置，包括：

遮罩层添加模块，用于侦听页面显示区域中第一图片元素的拖拽动作开始，添加遮罩层；其中所述遮罩层添加在页面文档对象模型树中最后一个元素位置之后，所述遮罩层置于顶层，所述遮罩层覆盖的区域包括页面显示的区域；

第二图片元素创建模块，用于在遮罩层创建与被拖拽的第一图片元素对应的第二图片元素，所述第二图片元素包括第一图片元素的内容数据中的图片；

第二图片元素拖动模块，用于侦听第二图片元素的拖拽移动，根据拖拽移动设置所述第二图片元素的位置；

内容处理模块，用于侦听页面显示区域中第一图片元素的拖拽动作结束，隐藏所述遮罩层，根据拖拽动作结束处的第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换；

渲染显示模块，用于在所述页面显示的区域中仅渲染被交换的第一图片元素和第三图片元素。

优选的，所述第二图片元素创建模块包括：

第一数据获取子模块，用于侦听到鼠标拖拽动作开始，获取第一图片元素的级联样式表位置数据、文档对象模型树结构数据、和文档对象模型树结构中的内容数据；

第一创建子模块，用于依据所述级联样式表位置数据和文档对象模型树结构数据在所述遮罩层中创建与第一图片元素对应的第二图片元素；

赋值子模块，用于将所述文档对象模型树结构中的内容数据依据文档对象模型树结构形式设置到所述第二图片元素。

优选的，添加所述遮罩层的模块包括：

文档对象模型树添加子模块，用于预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构；

样式设置子模块，用于在级联样式表对应的样式结构体中设置遮罩层的覆盖区域为所述页面显示的区域。

优选的，预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构时包括：

在文档对象模型树的主干尾端添加对应遮罩层的div。

优选的，预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构时包括：

在文档对象模型树各放置各可拖拽元素所在子div的最后一个父div之后，添加对应遮罩层的div，并将其属性设置为顶层div。

优选的，所述内容处理模块包括：

删除子模块，用于删除所述遮罩层中创建的第二图片元素。

优选的，所述内容处理模块包括：

第三图片元素获取子模块，用于侦听到拖拽动作结束，若所在区域对应的第三图片元素对应的文档对象模型树结构中存在内容数据时，获取第三图片元素对应的文档对象模型树结构中的内容数据；

替换子模块，用于保持第一图片元素和第三图片元素的级联样式表位置和文档对象模型树结构不变，并将第一图片元素对应文档对象模型树结构中的内容数据与第三图片元素对应文档对象模型树结构中的内容数据互换。

优选的，在所述遮罩层添加模块，所述侦听页面显示区域中第一图片元素的拖拽动作开始时包括：

判断子模块，用于当侦听到鼠标按下时，判断鼠标按下区域是否属于有效区域；如果是，则侦听到鼠标是否开始移动，如果是，则加载所述遮罩层。

优选的，进一步包括：：

拖拽结束区域判断模块，用于判断拖拽动作结束处拖拽鼠标所在区域是否在第三图片元素所在区域的预定范围内；

如果是，确定所述拖拽动作结束处拖拽鼠标所在区域的图片元素为第三图片元素。

优选的，所述遮罩层覆盖于以绝对布局方式构建的图片元素之上；

和/或，所述遮罩层覆盖于以流式布局方式构建的图片元素之上。

优选的，所述绝对布局方式构建的图片元素包括九宫格形式的图片元素、和/或十二宫格的图片元素。

与现有技术相比，本申请包括以下优点：

本申请在侦听到鼠标的拖拽动作开始时，激活添加覆盖于整个拖拽区域的遮罩层，然后在遮罩层中创建被拖拽的第一图片元素对应的第二图片元素；其中所述遮罩层对应在文档对象模型树中的位置，在各元素对应在文档对象模型树中的各位置之后；那么鼠标拖动时，是拖动的遮罩层中的第二图片元素，并没有拖动原来位置的第一图片元素，如此第一图片元素的位置没有改变，根据浏览器的渲染规则，在文档对象模型树中该元素之后的元素的位置也无需重新进行计算，一般只要计算遮罩层中第二图片元素的位置即可，计算量减小。另外，在拖动结束后，只是将第一图片元素的显示内容，即第一图片元素对应的文档对象模型树结构中的内容数据，作为第三图片元素的的内容，如果第三图片元素存在显示内容，那么也只需将第三图片元素的显示内容作为第一，在这个过程中，第三图片元素和第一图片元素改变的只是其显示内容，其位置与结构均未进行改变，因此，浏览器也无需重新计算在文档对象模型树中第一图片元素或第三图片元素的之后的元素的位置；并且由于计算元素位置时，需要大量借用页面脚本去计算，而本申请由于基本上没有重新计算位置的元素，所以一般不用借用页面脚本去计算。再次，在内容置换结束后，重绘时只需要重绘第一图片元素与第三图片元素的内容即可，无需重绘在文档对象模型树中第一图片元素或第三图片元素的之后的元素的内容。

因此，本申请减少了回流的次数，即需要重新计算位置的元素的个数，从而也减少了重绘的次数，降低了系统资源占用率，也降低了CPU的使用率。

附图说明

图1是本申请一种图片元素显示方法的流程示意图；

图2是本申请优选的一个遮罩层在HTML对应的文档对象模型树结构中位置示例图；

图3是本申请采用十二宫格布局时的图片元素拖拽示例；

图4是本申请一种图片元素显示装置的结构示意图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

本申请的核心思想之一在于：在文档对象模型树中最后一个元素之后添加一个遮罩层结构；当侦听到鼠标开始拖拽动作时，添加遮罩层，并在遮罩层中复制一个与鼠标拖拽的第一图片元素对应的第二图片元素，如此，在拖拽过程中，拖拽的是遮罩层中的第二图片元素，而第一图片元素没有进行任何位置的移动；当侦听到鼠标弹起时，隐藏所述遮罩层，根据鼠标弹起时所指第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换，如此即可保证第一图片元素和第三图片元素的位置不改变的情况下，交换内容。在这个过程中，位置移动的是遮罩层中的第二图片元素，而由于遮罩层结构在文档对象模型树结构中最后一个元素位置之后，那么该第二图片元素之后基本上没有其他元素需要重新进行位置计算，也即回流的只是遮罩层中的第二图片元素。同时，只需要将元素和第三图片元素的内容数据交换后，进行重绘渲染即可。

参照图1，示出了本申请一种图片元素显示方法的流程示意图，具体可以包括：

步骤110，侦听页面显示区域中第一图片元素的拖拽动作开始，添加遮罩层；其中所述遮罩层添加在页面文档对象模型树中最后一个元素位置之后，所述遮罩层置于顶层，所述遮罩层覆盖的区域包括页面显示的区域；

在本申请中，可预先在文档对象模型树中设置了一个遮罩层，在未激活添加时处于隐藏状态。

设置所述遮罩层的步骤包括：

步骤A1，预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构。

在RIA中，可移动的元素也在文档对象模型树中对应相应位置，一般情况下，每个可移动元素在由级联样式表对应的样式结构体设置时，其在浏览器窗口中存在一定的区域，比如以一个矩形的样式存在，用户即可通过鼠标拖动该位置的矩形到其他位置。

本申请将遮罩层设置文档对象模型树中最后一个可移动元素的位置之后。参照图2，其示出了本申请优选的一个遮罩层在HTML对应的文档对象模型树结构中位置示例图。

优选的，预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构时包括：

步骤A11，在文档对象模型树的主干尾端添加对应遮罩层的div。

主要的内容将放在图2中<div id=“mainwrapper”>层中，根据应用的复杂程度，层次的嵌套数量可能更多。所有可拖动的元素均在<div id=“mainwrapper”>层中，比如<div class=”qsitecontainer”></div>。

在body的最后有一个<div id=“drag_layer”>,用作遮罩层，真正的拖动过程是在他内部完成的。

或者，优选的，步骤A12，在文档对象模型树各放置各可拖拽元素所在子div的最后一个父div之后，添加对应遮罩层的div，并将其属性设置为顶层div。

在示例中，在主体内容层<div id=“mainwrapper”>……</div>层中包括了多个页面层，比如<div id=”page0”>……</div>，<div id=”page1”>……</div>，<div id=”page2”>……</div>，页面层表示当前浏览器将页面分页进行显示。<div id=”page0”>……</div>的元素在第一页显示，<divid=”page2”>……</div>中的元素在第二页显示，<div id=”page2”>……</div>中的元素在第三页显示。那么可直接在最后一页的div结构后添加<div id=“drag_layer”>，但此种方式需要设置该结构为顶层结构，使该div之后的div不会显示在该层之上。

步骤A2，在级联样式表对应的样式结构体中设置遮罩层的覆盖区域为所述页面显示的区域。

为了保证拖拽的元素始终在遮罩层中移动，需要在构建呈现树时，在级联样式表对应的样式结构体中设置遮罩层的覆盖区域包括各可移动元素所在的区域。一般情况下，可设置遮罩层覆盖区域的坐标为浏览器显示窗口的坐标。为了节省渲染计算量，本申请优选的将遮罩层覆盖的区域固定设置为所述页面显示的区域。

所述遮罩层覆盖于以绝对布局方式构建的图片元素之上；

和/或，所述遮罩层覆盖于以流式布局方式构建的图片元素之上。

所述绝对布局方式构建的图片元素包括九宫格形式的图片元素、和/或十二宫格的图片元素。在实际显示中，显示区域中图片元素拖动时是以图片元素的形式被拖动的。

步骤120，在遮罩层创建被拖拽的第一图片元素对应的第二图片元素，所述第二图片元素为包括第一图片元素的内容数据中的图片；

优选的，侦听页面显示区域中第一图片元素的拖拽动作开始，添加遮罩层，在遮罩层创建被拖拽的第一图片元素对应的第二图片元素的步骤包括：

步骤B1，侦听到鼠标拖拽动作开始，获取第一图片元素的级联样式表位置数据、文档对象模型树结构数据、和文档对象模型树结构中的内容数据；

鼠标事件一般有三种：按下down，移动move，弹起up。可添加鼠标侦听事件侦听鼠标的动作，当侦听到down+move时，即可判定鼠标的拖拽动作开始。

鼠标按下并开始移动时，其指示了被拖拽的第一图片元素的位置，那么即可将该位置的第一图片元素的级联样式表位置数据，文档对象模型树结构数据和文档对象模型树结构中的内容数据进行获取。比如一个元素的文档对象模型树结构为<div class=”qsitecontainer”></div>，那么其文档对象模型树结构中的内容数据为”qsitecontainer”，其级联样式表位置数据包括该元素所在区域，比如矩形区域的四角的坐标等。

另外，所述侦听页面显示区域中第一图片元素的拖拽动作开始步骤包括：

侦听到鼠标按下时，判断鼠标按下区域是否属于有效区域；如果是，则侦听到鼠标是否开始移动，如果是，则加载所述遮罩层。

本申请还可设置拖拽的有效区域，比如一个元素占据的一个矩形区域，那么设置该矩形其中1/4块子矩形区域为拖拽有效区域，当鼠标不落在这个区域时，不能进行拖拽动作。当鼠标落在这个区域，当侦听到鼠标开始移动，则添加遮罩层，开始进入拖拽动作处理。

另外，当侦听到鼠标弹起时，根据当前鼠标所在坐标判断所在区域，并根据所述区域与第三图片元素的一一对应关系确定所述第三图片元素。

本申请中，页面所在整个区域可以分区处理，即可以将整个区域分成多个区域，每个区域与相应的第三图片元素对应。

比如，如果以九宫格形式显示的图片元素，那么可以将整个页面区域分为九个区域：左上，中上，右上，左中，正中，右中，左下，中下，右下。分别从左至右，从上之下对应第一至第九个图片元素。那么当鼠标弹起时处于右下区域，即可判断当前拖拽的目标区域对应的元素为第九个图片元素。

步骤B2，依据所述级联样式表位置数据和文档对象模型树结构数据在所述遮罩层中创建与第一图片元素对应的第二图片元素；

基于前述步骤中构建的遮罩层，可知激活添加时覆盖于当前显示的内容层之上，那么可在遮罩层中创建与第一图片元素相同模式的第二图片元素。一般基于第一图片元素对应的的文档对象模型树结构，即div结构，在遮罩层中创建与第一图片元素对应的文档对象模型树结构相同的文档对象模型树结构；同时，将第二图片元素的级联样式表位置设置数据为与第一图片元素的级联样式表位置数据相同，一般第一图片元素的位置数据包括其所在区域的宽、高、所在坐标等。

步骤B3，将所述文档对象模型树结构中的内容数据依据文档对象模型树结构形式设置到所述第二图片元素。

然后，将第一图片元素的文档对象模型树结构中的内容数据赋予第二图片元素的文档对象模型树结构中。如此，即可保证第二图片元素出现在第一图片元素所在的位置，并且与第一图片元素相似。

将所述文档对象模型树结构中的内容数据依据文档对象模型树结构形式设置到所述第二图片元素的代码示例如下：

比如在function onDragStart(e)函数中当侦听到对元素的鼠标拖拽动作时，添加遮罩层draglayer，并在遮罩层中创建第二图片元素gost.$element，并把第一图片元素的级联样式表位置属性等赋予第二图片元素。

步骤130，侦听第二图片元素的拖拽移动，根据拖拽移动设置所述第二图片元素的位置。

获取鼠标移动过程中的坐标，并将所述第二图片元素的坐标随所述鼠标移动过程中的坐标改变而改变。在鼠标移动过程中，鼠标的坐标会相应进行改变，那么为了使第二图片元素也随着鼠标进行运动，那么第二图片元素的坐标也需要随着鼠标的坐标改变而进行相应的改变。

比如在function onDragAppMove(e)函数中，拖拽时，鼠标移动过程中具有坐标（x，y），以第一图片元素所在位置右上角坐标（X，Y）为基准，将鼠标移动过程中的（x，y）与（X，Y）进行计算和处理，即可获得当前移动的第二图片元素的位置，即第二图片元素随坐标变换而变换。

步骤140，侦听页面显示区域中第一图片元素的拖拽动作结束，隐藏所述遮罩层，根据拖拽动作结束处的第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换。

当侦听到鼠标的弹起（up）动作时，此时可隐藏遮罩层，对于用户端来说，此时遮罩层就不可见了，同时根据鼠标弹起时所指第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换。

优选的，根据拖拽动作结束处的第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换时包括：

步骤C1，侦听到拖拽动作结束，若所在区域对应的第三图片元素对应的文档对象模型树结构中存在内容数据时，获取第三图片元素对应的文档对象模型树结构中的内容数据。

进一步包括：

判断拖拽动作结束处拖拽鼠标所在区域是否在第三图片元素所在区域的预定范围内；

如果是，确定所述拖拽动作结束处拖拽鼠标所在区域的图片元素为第三图片元素。

鼠标弹起时，根据鼠标弹起时对应的区域，能指示拖拽的第三图片元素及其位置。此时，当第三图片元素位置存在显示内容时，即其对应的文档对象模型对象模型树结构中存在内容数据时，则获取第三图片元素对应的的文档对象模型树结构中的内容数据。如果没有，则不获取，直接设置为第三图片元素的待交换的文档对象模型树结构中的内容数据为空。

步骤C2，保持第一图片元素和第三图片元素的级联样式表位置和文档对象模型树结构不变，并将第一图片元素对应文档对象模型树结构中的内容数据与第三图片元素对应文档对象模型树结构中的内容数据互换。

将第一图片元素和第三图片元素的文档对象模型树结构中的内容数据进行互换，如此，第一图片元素和第三图片元素的内容即相互转换了，但是第一图片元素和第三图片元素的级联样式表位置和文档对象模型树结构均未改变。

优选的，所述侦听页面显示区域中第一图片元素的拖拽动作结束，隐藏所述遮罩层步骤包括：

删除所述遮罩层中创建的第二图片元素。

为了节省系统资源，在当次拖拽动作结束，隐藏遮罩层时，可将遮罩层中临时创建的第二图片元素进行删除。

比如在function onDragAppUp(e)函数中，设置删除第二图片元素的函数和隐藏遮罩层的函数，即可，隐藏遮罩层，并将遮罩层中临时创建的第二图片元素进行删除。

步骤150，在所述页面显示的区域中仅渲染被交换的第一图片元素和第三图片元素。

比如以绝对布局设置的九宫格形式页面，每个格子以CSS绝对定位的形式显示在页面上。如果第一图片元素和第三图片元素的内容进行了替换，那么即可渲染第一图片元素和第三图片元素替换后的内容，并重新渲染遮罩层的结构，即可将替换后的九宫格页面进行显示。

又比如，以流式布局设置的一排或多排图片元素，替换第一排的第一和第五个图片元素的内容后，只需渲染第一和第五各图片元素的内容，和遮罩层后即可进行显示。

本申请中，一般只需重绘第三图片元素和第一图片元素的内容，回流和重绘遮罩层位置和内容。因为第三图片元素和第一图片元素的位置没有改变，因此不用回流计算第三图片元素和第一图片元素及在文档对象模型树中两个元素的位置之后的元素的位置。只需回流计算处于最后位置的遮罩层的位置，而处于最后位置的遮罩层中元素的移动不影响前面元素的位置计算。因此本申请大大减少了拖拽过程中的计算量，提高效率，降低了资源消耗。

参照图3，其是本申请采用十二宫格布局时的图片元素拖拽示例。

图中页面的htlm语言的DOM树结构可如图2所示。即将遮罩层结构至于DOM树结构中body中的尾端，并使其为顶层结构。

其中，显示页面显示区域为301，遮罩层为302，在图中由于遮罩层没有具体体现，所以遮罩层302没有标出；在图中，所述遮罩层包括了页面显示区域301。

当鼠标按下时，系统侦听得到当前鼠标按下时的坐标是否属于有效区域。在本示例中判断鼠标按下时的坐标是否处于图中从左至右，从上至下的第二个图片元素310对应的有效区域；

如果是，则侦听鼠标是否开始移动，如果开始移动，则激活添加所述遮罩层302，并在所述遮罩层302中创建与所述第二个图片元素310具有相同内容的第二图片元素320，同时将所述第二个图片元素310的坐标赋予遮罩层中的第二图片元素320，使其能够显示于所述第二个图片元素310的位置。

在鼠标移动过程中，获取鼠标移动过程中的坐标，将其赋予所述遮罩层中的第二图片元素320，使所述第二图片元素320可以跟随鼠标移动而移动。

当鼠标到达目标位置弹起时，隐藏所属遮罩层，在这里，隐藏了所述遮罩层即可隐藏遮罩层中创建的第二图片元素320，也可将所述第二图片元素320进行删除。并判断当前鼠标的坐标所属的区域，并根据区域与当前区域的图片元素的对应关系，确定第三图片元素。比如鼠标弹起时，其所在的区域为图中“淘宝网”所在图片元素330。

在确定了第三图片元素后，即确认了拖拽的目标图片元素后，将所述被第二个位置的图片元素中的内容，比如图片，链接，文档等，与所述第三图片元素中（比如淘宝网所在的图片元素330）的内容进行替换，保持上述两个图片元素的坐标属性和结构属性不变。

然后将替换后的两个位置的图片元素进行渲染，并对所述隐藏的遮罩层进行渲染，即可将页面进行显示。

参照图4，其示出了本申请一种图片元素显示装置的结构示意图，包括：

遮罩层添加模块510，用于侦听页面显示区域中第一图片元素的拖拽动作开始，添加遮罩层；其中所述遮罩层添加在页面文档对象模型树中最后一个元素位置之后，所述遮罩层置于顶层，所述遮罩层覆盖的区域包括页面显示的区域；

第二图片元素创建模块520，用于在遮罩层创建被拖拽的第一图片元素对应的第二图片元素，所述第二图片元素为包括第一图片元素的内容数据中的图片；

第二图片元素拖动模块530，用于侦听第二图片元素的拖拽移动，根据拖拽移动设置所述第二图片元素的位置；

内容处理模块540，用于侦听页面显示区域中第一图片元素的拖拽动作结束，隐藏所述遮罩层，根据拖拽动作结束处的第三图片元素，将第一图片元素的内容数据与第三图片元素的内容数据进行交换；

渲染显示模块550，用于在所述页面显示的区域中仅渲染被交换的第一图片元素和第三图片元素。

优选的，所述第二图片元素创建模块包括：

第一数据获取子模块，用于侦听到鼠标拖拽动作开始，获取第一图片元素的级联样式表的位置数据、文档对象模型树的结构数据、和文档对象模型树结构中的内容数据；

第一创建子模块，用于依据所述级联样式表的位置数据和文档对象模型树的结构数据在所述遮罩层中创建与第一图片元素对应的第二图片元素；

赋值子模块，用于将所述文档对象模型树结构中的内容数据依据文档对象模型树结构形式设置到所述第二图片元素。

优选的，添加所述遮罩层的模块包括：

文档对象模型树添加子模块，用于预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构；

样式设置子模块，用于在级联样式表对应的样式结构体中设置遮罩层的覆盖区域为所述页面显示的区域。

优选的，预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构时包括：

在文档对象模型树的主干尾端添加对应遮罩层的div。

优选的，预先在页面对应的文档对象模型树中，最后一个元素的位置之后，添加遮罩层结构时包括：

在文档对象模型树各放置各可拖拽元素所在子div的最后一个父div之后，添加对应遮罩层的div，并将其属性设置为顶层div。

优选的，所述内容处理模块包括：

删除子模块，用于删除所述遮罩层中创建的第二图片元素。

优选的，所述内容处理模块包括：

第三图片元素获取子模块，用于侦听到拖拽动作结束，若所在区域对应的第三图片元素对应的文档对象模型树结构中存在内容数据时，获取第三图片元素对应的文档对象模型树结构中的内容数据；

替换子模块，用于保持第一图片元素和第三图片元素的级联样式表位置和文档对象模型树结构不变，并将第一图片元素对应文档对象模型树结构中的内容数据与第三图片元素对应文档对象模型树结构中的内容数据互换。

优选的，在所述遮罩层添加模块，所述侦听页面显示区域中第一图片元素的拖拽动作开始时包括：

判断子模块，用于当侦听到鼠标按下时，判断鼠标按下区域是否属于有效区域；如果是，则侦听到鼠标是否开始移动，如果是，则加载所述遮罩层。

优选的，进一步包括：：

拖拽结束区域判断模块，用于判断拖拽动作结束处拖拽鼠标所在区域是否在第三图片元素所在区域的预定范围内；

如果是，确定所述拖拽动作结束处拖拽鼠标所在区域的图片元素为第三图片元素。

优选的，所述遮罩层覆盖于以绝对布局方式构建的图片元素之上；

和/或，所述遮罩层覆盖于以流式布局方式构建的图片元素之上。

优选的，所述绝对布局方式构建的图片元素包括九宫格形式的图片元素、和/或十二宫格的图片元素。

对于系统实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。

本申请实施例可以实施在任何支持图形处理、互联网内容撷取和渲染的装置(或多个装置)上。这些装置包括但不限于个人计算机、集群服务器、移动电话、工作站、嵌入式系统、游戏机、电视、机顶盒，或任何其它支持计算机图形和内容显示的计算装置。这些装置可以包括但不限于拥有执行和储存指令的一个或多个处理器和存储器的装置。这些装置可以包括软件、固件和硬件。软件可以包括一个或多个应用程序和操作系统。硬件可以包括但不限于处理器、存储器及显示器。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

以上对本申请所提供的一种图片元素显示方法和装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (23)

1.一种页面渲染方法，其包括：

当侦听到对页面显示区域中第一图片元素的拖拽动作时，在所述页面显示区域之上显示遮罩层；

在所述遮罩层创建与所述第一图片元素对应的第二图片元素；

获取鼠标移动过程中的坐标并将其赋予所述第二图片元素以使所述第二图片元素随鼠标的移动而移动；

当侦听到拖拽动作结束时，隐藏所述遮罩层并确定拖拽动作结束处的第三图片元素；

将第一图片元素的内容数据与第三图片元素的内容数据进行交换；

在所述页面显示区域中仅渲染被交换的第一图片元素和第三图片元素。

2.根据权利要求1所述的方法，其中，在所述遮罩层创建与所述第一图片元素对应的第二图片元素进一步包括：

获取第一图片元素的级联样式表位置数据、文档对象模型树结构数据、和文档对象模型树结构中的内容数据；

依据所述级联样式表位置数据和文档对象模型树结构数据在所述遮罩层中创建与第一图片元素对应的第二图片元素；

将所述文档对象模型树结构中的内容数据依据文档对象模型树结构形式设置到所述第二图片元素。

3.根据权利要求1或2所述的方法，其中，所述遮罩层通过下面步骤创建：

在页面对应的文档对象模型树中最后一个元素的位置之后，添加遮罩层结构；

在级联样式表对应的样式结构体中设置遮罩层的覆盖区域为所述页面显示的区域。

4.根据权利要求3所述的方法，其中，页面对应的文档对象模型树中最后一个元素的位置为：文档对象模型树的主干尾端。

5.根据权利要求3所述的方法，其中，页面对应的文档对象模型树中最后一个元素的位置为：文档对象模型树各放置各可拖拽元素所在子div的最后一个父div。

6.根据权利要求1至5中任一项所述的方法，其中，隐藏所述遮罩层为：

删除所述遮罩层中创建的第二图片元素。

7.根据权利要求1至6中任一项所述的方法，其中，将第一图片元素的内容数据与第三图片元素的内容数据进行交换进一步包括：

若第三图片元素对应的文档对象模型树结构中存在内容数据，则获取第三图片元素对应的文档对象模型树结构中的内容数据；

保持第一图片元素和第三图片元素的级联样式表位置数据和文档对象模型树结构数据不变，并将第一图片元素对应文档对象模型树结构中的内容数据与第三图片元素对应文档对象模型树结构中的内容数据互换。

8.根据权利要求1至7中任一项所述的方法，其中，确定拖拽动作结束处的第三图片元素进一步包括：

判断拖拽动作结束处拖拽鼠标所在区域是否在第三图片元素所在区域的预定范围内；

如果是，确定所述拖拽动作结束处拖拽鼠标所在区域的图片元素为第三图片元素。

9.根据权利要求1至8中任一项所述的方法，其中，在所述页面显示区域之上显示遮罩层包括：

所述遮罩层覆盖于以绝对布局方式构建的图片元素之上；

和/或，所述遮罩层覆盖于以流式布局方式构建的图片元素之上。

10.根据权利要求9所述的方法，其中：

所述绝对布局方式构建的图片元素包括九宫格形式的图片元素、和/或十二宫格的图片元素。

11.一种遮罩层创建方法，其包括：

在页面对应的文档对象模型树中最后一个元素的位置之后，添加遮罩层结构；

在级联样式表对应的样式结构体中设置遮罩层的覆盖区域为所述页面显示的区域。

12.根据权利要求11所述的方法，其中，页面对应的文档对象模型树中最后一个元素的位置为：文档对象模型树的主干尾端。

13.根据权利要求11所述的方法，其中，页面对应的文档对象模型树中最后一个元素的位置为：文档对象模型树各放置各可拖拽元素所在子div的最后一个父div。

14.根据权利要求11至13中任一项所述方法，还包括：将所述遮罩层结构置为顶层结构。

15.一种页面渲染方法，其包括：

侦听鼠标在页面显示区域的按下动作；

如果按下动作所在区域为有效区域，则侦听鼠标是否开始移动；

如果鼠标开始移动，则确定鼠标按下动作所在区域的图片元素为第一图片元素并在所述页面显示区域之上显示遮罩层；

在所述遮罩层创建与所述第一图片元素相同模式的第二图片元素；

获取鼠标移动过程中的坐标并使所述第二图片元素的坐标随鼠标的移动而移动；

当侦听到鼠标抬起时，隐藏所述遮罩层并确定与鼠标抬起处所在区域对应的图片元素为第三图片元素；

将第一图片元素的内容数据与第三图片元素的内容数据进行交换；

在所述页面显示区域中仅渲染被交换的第一图片元素和第三图片元素。

16.根据权利要求15所述的方法，其中，在所述遮罩层创建与所述第一图片元素相同模式的第二图片元素进一步包括：

获取第一图片元素的级联样式表位置数据、文档对象模型树结构数据、和文档对象模型树结构中的内容数据；

依据所述级联样式表位置数据和文档对象模型树结构数据在所述遮罩层中创建与第一图片元素对应的第二图片元素；

将所述文档对象模型树结构中的内容数据依据文档对象模型树结构形式设置到所述第二图片元素。

17.根据权利要求15或16所述的方法，其中，所述遮罩层通过下面步骤创建：

在页面对应的文档对象模型树中最后一个元素的位置之后，添加遮罩层结构；

在级联样式表对应的样式结构体中设置遮罩层的覆盖区域为所述页面显示的区域。

18.根据权利要求17所述的方法，其中，页面对应的文档对象模型树中最后一个元素的位置为：文档对象模型树的主干尾端。

19.根据权利要求17所述的方法，其中，页面对应的文档对象模型树中最后一个元素的位置为：文档对象模型树各放置各可拖拽元素所在子div的最后一个父div。

20.根据权利要求15至19中任一项所述的方法，其中，隐藏所述遮罩层为：

删除所述遮罩层中创建的第二图片元素。

21.根据权利要求15至20中任一项所述的方法，其中，将第一图片元素的内容数据与第三图片元素的内容数据进行交换进一步包括：

若第三图片元素对应的文档对象模型树结构中存在内容数据，则获取第三图片元素对应的文档对象模型树结构中的内容数据；

保持第一图片元素和第三图片元素的级联样式表位置数据和文档对象模型树结构数据不变，并将第一图片元素对应文档对象模型树结构中的内容数据与第三图片元素对应文档对象模型树结构中的内容数据互换。

22.根据权利要求15至21中任一项所述的方法，其中，在所述页面显示区域之上显示遮罩层包括：

所述遮罩层覆盖于以绝对布局方式构建的图片元素之上；

和/或，所述遮罩层覆盖于以流式布局方式构建的图片元素之上。

23.根据权利要求22所述的方法，其中：

所述绝对布局方式构建的图片元素包括九宫格形式的图片元素、和/或十二宫格的图片元素。

Images