CN103425706B - 在内嵌浮动框架元素的网页中实现元素拖动的方法及装置 - Google Patents

Abstract

本发明公开了一种在内嵌iframe元素的网页中实现元素拖动的方法及装置。该方法包括：设置归属于网页、置于该网页所有元素的最顶层的全局阻挡层；以及，设置归属于网页、置于该iframe元素的上一层的局部阻挡层，为网页中在拖动轨迹上且处于拖动状态的iframe元素加载局部阻挡层；在接收到触发信息后，如果拖动轨迹上的非拖动元素中包含iframe元素，则为该网页加载全局阻挡层，和/或，为该非拖动元素中包含的iframe元素加载局部阻挡层；所加载的阻挡层屏蔽iframe元素的操作事件，并通过所加载的阻挡层归属的网页感知操作事件，触发输出触发信息的所述元素沿拖动轨迹拖动。应用本发明，可以提高拖动的有效性。

Description

在内嵌浮动框架元素的网页中实现元素拖动的方法及装置

技术领域

本发明涉及计算机技术，特别涉及一种在内嵌浮动框架元素的网页中实现元素拖动的方法及装置。

背景技术

元素（Element）拖动是网页（Web）应用中常用的一种与用户交互的手段，即通过鼠标或触控屏触摸操作，改变元素在网页中的位置以及元素对应的层在网页中的层叠顺序，从而可以将元素调整到网页中用户需要的位置并改变其在网页中的显示顺序。即通过监测鼠标点击、拖动和脱离接触三个操作事件，即鼠标在待拖动元素上按下（点击）时记录鼠标的坐标信息，在鼠标拖动时计算鼠标坐标信息的变化量，以该变化量为依据，设置待拖动元素的坐标，对待拖动元素进行拖动操作，在鼠标脱离待拖动元素（脱离接触）时停止拖动，从而实现元素在网页中的拖动。

为了满足用户对网页的个性化需求以及扩展网页的应用，现有技术基于上述网页，提出了一种基于浮动框架（iframe）元素的网页，即在一个网页中内嵌入框架区域或窗口、或其他网页，也就是说，iframe元素是一个特殊的网页元素，对iframe元素进行的操作事件由iframe元素而非网页进行感知，在iframe元素中，可以包含其他元素。这样，在网页中内嵌有iframe元素时，如果鼠标或触摸笔在拖动过程中经过iframe元素窗口，即iframe元素所在区域时，将由iframe元素捕获拖动事件，而由于网页与iframe元素相互独立，使得网页无法感知拖动事件，从而无法计算鼠标坐标信息的变化量，拖动将会被中断、终止或出错，导致不能将待拖动元素拖动至目标区域，使得拖动的有效性较低；进一步地，在后续中，当鼠标或触摸笔离开iframe元素窗口后，网页能够重新感知鼠标的拖动事件，但由于无法获知待拖动元素在iframe元素窗口中是处于拖动状态还是非拖动状态，将可能再次造成拖动操作的中断、终止或出错，使得拖动操作十分混乱，进一步降低了拖动的有效性。举例来说，在将待拖动元素拖动至iframe窗口后，例如，如果鼠标一直按住不放往前拖动，由于网页无法感知鼠标的拖动事件，因而，网页可能对待拖动元素不进行任何操作，使得待拖动元素不随鼠标的拖动而移动；当然，网页也可能将无法感知的拖动事件认为是操作事件与待拖动元素脱离接触，从而结束拖动流程。再例如，如果鼠标在进入iframe元素窗口后，在iframe元素上松开，拖动流程本应该结束，但由于网页无法感知脱离接触事件，当鼠标离开iframe元素窗口回到其他区域时，待拖动元素可能继续随鼠标拖动而移动。

发明内容

有鉴于此，本发明的主要目的在于提出一种在内嵌浮动框架元素的网页中实现元素拖动的方法，提高拖动操作的有效性。

本发明的另一目的在于提出一种在内嵌浮动框架元素的网页中实现元素拖动的装置，提高拖动操作的有效性。

为达到上述目的，本发明提供了一种在内嵌浮动框架元素的网页中实现元素拖动的方法，

设置归属于网页、置于该网页所有元素的最顶层的全局阻挡层；以及，设置归属于所述网页、置于该浮动框架元素的上一层的局部阻挡层，该方法包括：

获取网页中各元素的状态，为网页中在拖动轨迹上且处于拖动状态的浮动框架元素加载局部阻挡层；

在接收到网页中处于拖动状态的元素输出的触发信息后，如果拖动轨迹上的非拖动元素中包含浮动框架元素，则为该网页加载全局阻挡层，和/或，为该非拖动元素中包含的浮动框架元素加载局部阻挡层；

所加载的阻挡层屏蔽浮动框架元素的操作事件，并通过所加载的阻挡层归属的网页感知操作事件，触发输出触发信息的所述元素沿拖动轨迹拖动。

一种在内嵌浮动框架元素的网页中实现元素拖动的装置，该装置包括：元素状态获取模块、加载模块、监测模块以及拖动处理模块，其中，

元素状态获取模块，用于获取网页中各元素的状态；

加载模块，用于根据元素状态获取模块中元素的状态，为网页中在拖动轨迹上且处于拖动状态的浮动框架元素加载局部阻挡层；

接收拖动处理模块输出的加载信息，为该网页加载全局阻挡层，和/或，为该非拖动元素中包含的浮动框架元素加载局部阻挡层；

所加载的阻挡层屏蔽浮动框架元素的操作事件，并通过所加载的阻挡层归属的网页感知操作事件，触发输出触发信息的元素沿拖动轨迹拖动；

监测模块，用于在接收到网页中处于拖动状态的元素输出的触发信息后，向拖动处理模块输出拖动处理信息；

拖动处理模块，用于接收拖动处理信息，如果拖动轨迹上的非拖动元素中包含浮动框架元素，向加载模块输出加载信息。

由上述的技术方案可见，本发明提供的一种在内嵌浮动框架元素的网页中实现元素拖动的方法及装置，设置归属于网页、置于该网页所有元素的最顶层的全局阻挡层；以及，设置归属于网页、置于该iframe元素的上一层的局部阻挡层，获取网页中各元素的状态，为网页中在拖动轨迹上且处于拖动状态的iframe元素加载局部阻挡层；在接收到网页中处于拖动状态的元素输出的触发信息后，如果拖动轨迹上的非拖动元素中包含iframe元素，则为该网页加载全局阻挡层，和/或，为该非拖动元素中包含的iframe元素加载局部阻挡层；所加载的阻挡层屏蔽iframe元素的操作事件，并通过所加载的阻挡层归属的网页感知操作事件，触发输出触发信息的所述元素沿拖动轨迹拖动。这样，在网页中内嵌有iframe元素时，首先为网页中处于拖动状态的iframe元素加载局部透明阻挡层，从而实现网页感知对iframe元素的选取；在选取iframe元素后，再为非拖动元素中包含的浮动框架元素加载全局透明阻挡层，从而屏蔽浮动框架元素的操作事件，使得选取的元素能够跟随操作事件的拖动而拖动，避免拖动过程中的混乱，提高了拖动操作的有效性。

附图说明

图1为本发明实施例在内嵌浮动框架元素的网页中实现元素拖动的方法流程示意图；

图2为本发明实施例在内嵌浮动框架元素的网页中实现元素拖动的方法具体流程示意图；

图3为本发明实施例在内嵌浮动框架元素的网页中实现元素拖动的方法具体流程示意图；

图4为本发明实施例基于图3为元素B加载局部透明阻挡层的示意图；

图5为本发明实施例基于图3点击元素B后的示意图；

图6为本发明实施例基于图3拖动元素B的示意图；

图7为本发明实施例基于图3鼠标按键松开后的示意图；

图8为本发明实施例在内嵌浮动框架元素的网页中实现元素拖动的装置结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图及具体实施例对本发明作进一步地详细描述。

现有拖动网页中元素的方法，如果网页中内嵌有iframe元素，即网页中存在iframe元素，在待拖动元素为非iframe元素时，如果该待拖动元素在拖动过程中经过iframe元素所在区域，无法获知待拖动元素在iframe元素所在区域中是处于拖动状态还是非拖动状态；在待拖动元素为iframe元素时，网页无法感知发生在iframe元素所在区域中的点击事件。因而，使得拖动操作混乱，无法实现以iframe元素作为待拖动元素的拖动操作。

本发明实施例中，对于网页中存在iframe元素的情况，首先，如前所述，对于iframe元素来说，执行拖动操作以及非拖动将分别由网页和iframe元素进行监控。因而，在执行拖动事件前，需要获知iframe元素的状态，例如，是处于拖动状态还是非拖动状态，以使其当前状态唯一，以便采用本发明实施例的方法进行相应操作。本发明实施例中，为了在采用本发明实施例的方法进行相应操作前确定iframe元素的状态，对于网页中当前显示的元素为iframe元素的情形，可以预先设置其状态为非拖动状态，即对该iframe元素只能执行非拖动操作，例如，点击链接、选取文本等（点击事件），而不能对该iframe元素执行拖动操作（拖动事件）；对于网页中除当前显示的iframe元素之外的iframe元素，设置其所处的状态为拖动状态，即对这些iframe元素只能执行拖动操作，而不能执行非拖动操作；而对于网页中非iframe元素，其操作与现有流程相同。这样，如果当前显示的元素为iframe元素，可以对该元素执行点击操作，而如果当前显示的元素为iframe元素，如果需要对该iframe元素执行拖动操作，则可以通过将其他元素置为当前元素，从而采用本发明实施例的方法，使得用户对该iframe元素执行拖动时，网页就可以感知操作事件。

为了解决拖动事件拖动至iframe元素所在区域后，网页无法感知拖动事件的技术问题：

通过预先设置归属于网页、并与该网页窗口（浏览器窗口）尺寸相同、置于该网页所有元素的最顶层的全局阻挡层，这样，在加载全局阻挡层后，由于该全局阻挡层在网页所有元素对应的层的最顶层，因而，该全局阻挡层可以屏蔽整个网页的元素，并由该全局阻挡层归属的网页来感知拖动事件，从而阻挡iframe元素捕获拖动事件。因而，在网页中元素处于拖动的状态下，加载该全局阻挡层，即将该全局阻挡层置于网页所有元素对应的层的最顶层（层叠顺序最高），以使全局透明阻挡层归属的网页感知拖动事件，从而阻挡iframe元素捕获拖动事件。这样，在待拖动元素被拖动到iframe元素所在区域后，该全局阻挡层屏蔽浮动框架元素的拖动事件，而该全局阻挡层所属的网页能够监测待拖动元素的拖动事件，从而完成拖动操作；在完成拖动后，如果需要点击元素中的链接、选择元素中的文字等，则卸载该全局阻挡层，即将该全局阻挡层的层属性变为隐藏状态，从而不影响用户的非拖动操作。

最后，为了解决待拖动元素为iframe元素时，基于iframe元素的网页无法感知选取待拖动元素的技术问题，本发明实施例中，通过预先设置归属于网页、并与iframe元素尺寸相同的局部阻挡层，即局部阻挡层屏蔽该iframe元素所在区域，以使局部透明阻挡层归属的网页感知点击事件，并用以阻挡iframe元素捕获点击事件。也就是说，在选取的待拖动元素为iframe元素时，加载该局部阻挡层，即将该局部阻挡层的层属性设置为显示状态，置于该iframe元素对应的层的上一层，以阻挡iframe元素捕获点击事件。这样，在选取待拖动元素时，该局部阻挡层所属的网页能够监测操作事件选取待拖动元素的点击事件，从而完成选取待拖动元素的操作。

进一步地，还可以设置上述的阻挡层为不遮挡查看该阻挡层的下一层元素内容的透明层。

图1为本发明实施例在内嵌浮动框架元素的网页中实现元素拖动的方法流程示意图。参见图1，该流程包括：

步骤101，设置归属于网页、置于该网页所有元素的最顶层的全局阻挡层；以及，设置归属于所述网页、置于该浮动框架元素的上一层的局部阻挡层；

本步骤中，设置的全局阻挡层的尺寸不小于拖动轨迹对应的网页窗口尺寸，设置的局部阻挡层的尺寸不小于iframe元素尺寸。较佳地，全局阻挡层的尺寸与该网页窗口尺寸相同，局部阻挡层的尺寸与浮动框架元素尺寸相同。

一个网页中可能包含一个或多个元素，每个元素对应一个层，各元素对应的层在网页中具有层叠顺序，并按照层叠顺序在网页中展示，举例来说，如果一个网页中包含两个元素，分别为元素A和元素B，元素A对应的层在元素B对应的层的上一层，即元素A的层叠顺序在元素B的层叠顺序之上，元素A为当前窗口，如果元素A与元素B的位置不重叠，则在网页展示中，可以通过加载元素A，即设置元素A对应的层的层属性为显示状态，并设置高于元素A层叠顺序对应的层的层属性为隐藏状态，以实现元素A为当前窗口，并可以设置元素A高亮，以表示元素A对应的层在元素B对应的层的上一层，如果元素A与元素B的位置部分或全部重叠，则在网页展示中，可以设置元素A覆盖重叠部分的元素B，以表示元素A为当前窗口，元素B为非当前窗口。当然，实际应用中，显示的当前元素也会发生相应改变。例如，如果用户点击元素B，则加载元素B，卸载元素A，即设置元素B对应的层的层属性为显示状态，设置元素A对应的层的层属性为隐藏状态（如果还有层叠顺序高于元素B的其它层，则还需设置其它层的层属性为隐藏状态），使得元素B变为当前窗口，元素A为非当前窗口。

步骤102，获取网页中各元素的状态，为网页中在拖动轨迹上且处于拖动状态的浮动框架元素加载局部阻挡层；

步骤103，在接收到网页中处于拖动状态的元素输出触发信息后，如果拖动轨迹上的非拖动元素中包含浮动框架元素，则为该网页加载全局阻挡层，和/或，为该非拖动元素中包含的浮动框架元素加载局部阻挡层；

步骤104，所加载的阻挡层屏蔽浮动框架元素的操作事件，并通过所加载的阻挡层归属的网页感知操作事件，触发所述输出触发信息的元素沿拖动轨迹拖动。

本步骤中，操作事件包括：鼠标操作事件、触控操作事件或者手写笔操作事件。

下面基于图1，对本发明实施例作进一步说明。

图2为本发明实施例在内嵌浮动框架元素的网页中实现元素拖动的方法具体流程示意图。参见图2，该流程包括：

步骤201，预先设置归属于网页、并与该网页窗口尺寸相同、置于该网页所有元素的最顶层的全局透明阻挡层；

本步骤中，在加载设置的全局透明阻挡层后，该全局透明阻挡层的层属性为显示状态，即置于该网页所有元素对应的层的最顶层，在卸载时，该全局透明阻挡层的层属性为隐藏状态。

步骤202，预先设置归属于网页、并与iframe元素尺寸相同、置于该浮动框架元素的上一层的局部透明阻挡层；

本步骤中，在加载设置的局部透明阻挡层后，该局部透明阻挡层的层属性为显示状态，即置于该iframe元素的上一层，在卸载时，该局部透明阻挡层的层属性为隐藏状态。一个iframe元素对应设置一个局部透明阻挡层，局部透明阻挡层置于相应iframe元素对应的层的上方，即iframe元素对应的层的上一层，该上一层与其他元素对应的层的层叠关系与iframe元素对应的层与其他元素对应的层的层叠关系相同，用以阻挡iframe元素捕获鼠标事件。

本发明实施例中，网页中各元素按照相应元素对应的层在网页中的层叠顺序位，从高至低依序展示，所述最顶层对应的层叠顺序位最高，最底层对应的层叠顺序位最低，所述iframe元素对应的层的上一层对应的层叠顺序位高于iframe元素对应的层的层叠顺序位。

所应说明的是，步骤201与步骤202并没有先后顺序之分，在本发明实施例中，步骤201与步骤202也只需要执行一次，而无需在每次拖动时都执行。

步骤203，获取网页中各元素的状态，为网页中在拖动轨迹上处于拖动状态的iframe元素加载局部透明阻挡层；

本步骤中，拖动轨迹是指后续元素拖动过程中经过的路径。对于网页中包含iframe元素的情况，对iframe元素进行的操作包括两种情况，即在iframe元素所在区域内而进行的非拖动操作，以及，将iframe元素所在区域作为整体而进行的整体拖动操作。

对iframe元素所在区域内进行的操作，例如，可以是对iframe元素所在区域中的链接操作、选择iframe元素所在区域中的文字操作等，由于该类操作在iframe元素所在区域内进行，由iframe元素进行操作事件感知，其操作与现有技术相同；而对于对iframe元素所在区域进行整体拖动操作的情况，需要阻挡iframe元素对操作事件进行感知，以避免拖动混乱。因此，本发明实施例中，通过预先设置iframe元素的状态，即该iframe元素是处于拖动状态还是非拖动状态，以便于采取相应的处理。例如，预先设置网页中当前显示的元素（当前窗口，不包括非iframe元素）的状态为非拖动状态，即对该元素只能执行非拖动操作，而不能对该元素执行拖动操作；对于除当前显示的元素之外的元素（不包括非iframe元素），设置其所处的状态为拖动状态，即对这些元素只能执行拖动操作，而不能执行非拖动操作。当然，实际应用中，也可以设置网页中当前显示的元素的状态为拖动状态，相应地，对于除当前显示的元素之外的元素，设置其所处的状态为非拖动状态。

在确定网页中各元素所处的状态后，为网页中拖动轨迹上处于拖动状态的所有iframe元素加载相应的局部透明阻挡层以阻挡iframe元素捕获操作事件，即由局部透明阻挡层归属的网页感知操作事件，从而阻挡iframe元素捕获点击事件。这样，由于局部透明阻挡层置于该iframe元素的上一层，可以便于后续中无论对哪一iframe元素执行拖动操作时，可以避免由iframe元素对操作事件进行感知，使得拖动混乱。

对于iframe元素处于非拖动状态的情形，如果需要对其进行拖动操作，可以通过将其他元素进行拖动或点击，使iframe元素成为当前显示元素，从而使该非拖动状态的iframe元素更新为拖动状态。

步骤204，在接收到网页中处于拖动状态的元素输出触发信息后，如果拖动轨迹上的非拖动元素中包含iframe元素，加载全局透明阻挡层、和/或，为该非拖动元素中包含的iframe元素加载局部透明阻挡层，触发输出触发信息的元素沿拖动轨迹拖动。

本步骤中，如前所述，当前显示的iframe元素的状态为非拖动状态，即由于未对该当前显示的iframe元素加载局部透明阻挡层，因而，只能执行点击操作，即与现有技术相兼容；而除当前显示的iframe元素之外的iframe元素，由于加载了局部透明阻挡层，因而，可以感知用户的拖动操作。也就是说，在该方法中，首先需要将待拖动的iframe元素的状态变换为非拖动状态。

在网页中处于拖动状态的元素检测到操作事件后，输出触发信息。

还可以进一步包括：如果拖动轨迹上的非拖动元素中不包含iframe元素，触发输出触发信息的元素沿拖动轨迹拖动。这样，在对处于拖动状态的iframe元素加载局部透明阻挡层后，如果拖动轨迹上的非拖动元素中不包含iframe元素，则待拖动元素在网页内拖动，局部透明阻挡层能够阻挡iframe元素感知用户在待拖动元素上的拖动事件；如果拖动轨迹上的非拖动元素中包含有iframe元素，则还需要通过加载全局透明阻挡层或为非拖动元素中的iframe元素加载局部透明阻挡层，以避免待拖动元素在网页内拖动至包含有iframe元素的非拖动元素所在区域时，该iframe元素感知拖动事件。

待拖动元素可以为非iframe元素，也可以为iframe元素。如果为非iframe元素，待拖动元素在非iframe元素所在区域进行拖动时，其操作与现有技术相同，在进入到iframe元素所在区域后，由于加载了全局透明阻挡层或局部透明阻挡层，网页能够感知操作事件，使得待拖动元素可以跟随操作事件拖动；如果待拖动元素为iframe元素，通过为该iframe元素加载的局部透明阻挡层，使得局部透明阻挡层所属的网页可以感知用户选取待拖动元素的操作，使得iframe元素可以跟随拖动轨迹拖动。

在网页中处于拖动状态的元素输出触发信息后，该拖动元素对应的层为当前显示层，其层叠顺序仅次于全局透明阻挡层，但由于全局透明阻挡层为透明层，因而，显示的内容为该拖动元素。

当然，实际应用中，如果非拖动元素中不包含iframe元素，也可以加载全局透明阻挡层，然后触发所述待拖动元素跟随操作事件拖动。本发明实施例中，对于全局透明阻挡层以及局部透明阻挡层，在未对其进行卸载时，其显示状态维持不变，如果同时存在全局透明阻挡层以及局部透明阻挡层，则依据其层叠顺序感知操作事件，例如，在加载全局透明阻挡层后，由于全局透明阻挡层的层叠顺序位最高，因而，由全局透明阻挡层感知操作事件。加载的各局部透明阻挡层之间相互独立。

触发输出触发信息的元素沿拖动轨迹拖动包括：

按照预先设置的时间周期，获取操作事件的坐标信息；

计算当前时间周期获取的操作事件坐标信息与上一次时间周期获取的操作事件坐标信息的变化量；

触发输出触发信息的元素根据计算得到的变化量进行拖动。

较佳地，还可以进一步包括：

步骤205，在接收到所述输出触发信息的元素在脱离接触处输出的拖动终止信息后，触发所述输出触发信息的元素拖动至脱离接触处，卸载加载的全局透明阻挡层以及局部透明阻挡层。

本步骤中，如果操作事件脱离了与待拖动元素的接触，表明用户已将待拖动元素拖动至预期的位置，这时，待拖动元素拖动至目标区域，卸载全局透明阻挡层以及局部透明阻挡层，结束该在内嵌浮动框架元素的网页中实现元素拖动的流程。

所应说明的是，本发明实施例中，可以通过浮动层（div，division）元素实现透明阻挡层（全局透明阻挡层以及局部透明阻挡层）功能，其流程包括：

通过脚本（程序）在网页中放入div元素；

通过脚本设置div元素的样式；

本步骤中，div元素的样式包括背景色、长宽、坐标、层叠次序、对齐方式等。

通过脚本设置该div元素需要响应的操作事件。

当然，实际应用中，也可以通过其他元素实现透明阻挡层功能，例如，可以通过块（block）元素的方式实现。

图3为本发明实施例在内嵌浮动框架元素的网页中实现元素拖动的方法具体流程示意图。参见图3，以网页中包含两个元素A和B为例，其中，元素A为当前显示的元素且为iframe元素，处于非拖动状态；元素B为非当前显示的元素且为iframe元素，处于拖动状态，需要对元素B执行拖动操作，该流程包括：

步骤301，预先设置归属于网页、并与元素B尺寸相同、置于元素B的上一层的局部透明阻挡层；

步骤302，获取网页中元素A和元素B的状态，为网页中处于拖动状态的元素B加载局部透明阻挡层；

本步骤中，元素A为当前显示元素，其对应的窗口为当前窗口，元素B对应的窗口为非当前窗口。

图4为本发明实施例基于图3为元素B加载局部透明阻挡层的示意图。参见图3，在加载局部透明阻挡层，该局部透明阻挡层位于元素B对应的层的上一层。

步骤303，用户通过鼠标点击元素B，加载全局透明阻挡层或为元素A加载局部透明阻挡层，并拖动元素B；

本步骤中，用户通过鼠标点击元素B，元素B成为当前显示元素，即当前窗口，加载的局部透明阻挡层所属的网页感知鼠标操作。

全局透明阻挡层归属于网页、并与该网页窗口尺寸相同，加载状态的全局透明阻挡层置于该网页所有元素对应的层的最顶层。

为元素A加载的局部透明阻挡层归属于网页、并与元素A尺寸相同，加载状态的局部透明阻挡层置于元素A对应的层的上一层。

在加载全局透明阻挡层或为元素A加载局部透明阻挡层后，触发元素B跟随操作事件拖动。

图5为本发明实施例基于图3点击元素B后的示意图。参见图4，在点击元素B后，元素B为待拖动元素。

图6为本发明实施例基于图3拖动元素B的示意图。参见图6，加载全局透明阻挡层，并为元素A加载局部透明阻挡层。

步骤304，元素B被拖动到目标位置，用户鼠标按键松开，卸载加载的局部透明阻挡层以及全局透明阻挡层。

本步骤中，在元素B被拖动到目标位置后，用户鼠标按键松开，触发卸载局部透明阻挡层以及全局透明阻挡层。此时，元素B对应的窗口为当前窗口，元素A对应的窗口为非当前窗口，元素B只能执行点击操作，元素A只能执行拖动操作。

图7为本发明实施例基于图3鼠标按键松开后的示意图。参见图7，在鼠标按键松开后，卸载加载的阻挡层，元素B覆盖一部分元素A。

由上述可见，本发明实施例的在内嵌浮动框架元素的网页中实现元素拖动的方法，获取网页中各元素的状态，为网页中拖动轨迹上处于拖动状态的iframe元素加载归属于网页、并与相应iframe元素尺寸相同、置于相应iframe元素对应的层的上一层的局部透明阻挡层；在监测到操作事件与网页中处于拖动状态的元素接触后，如果非拖动元素中包含iframe元素，加载归属于网页、并与该网页窗口尺寸相同、置于该网页所有元素对应的层的全局透明阻挡层、和/或，为非拖动元素中的iframe元素加载局部透明阻挡层；如果非拖动元素中不包含iframe元素，触发所述待拖动元素跟随操作事件拖动。这样，在网页中具有iframe元素时，如果待拖动元素为iframe元素，通过为该iframe元素加载局部透明阻挡层，使局部透明阻挡层所属的网页能够捕获点击事件，从而实现待拖动元素的选取；而在鼠标或触摸笔在拖动过程中经过iframe元素所在区域，将由加载的全局透明阻挡层所属的网页捕获拖动事件，使得网页感知拖动事件，从而实时计算鼠标坐标信息的变化量，使得待拖动元素能够跟随鼠标的拖动而拖动，拖动的有效性高。

图8为本发明实施例在内嵌浮动框架元素的网页中实现元素拖动的装置结构示意图。参见图8，该装置包括：元素状态获取模块、加载模块、监测模块以及拖动处理模块，其中，

元素状态获取模块，用于获取网页中各元素的状态；

本发明实施例中，元素（不包括非iframe元素）的状态包括：元素处于拖动状态以及元素处于非拖动状态。元素的状态根据预先设置的策略确定，例如，如果预先设置网页中当前显示的元素的状态为非拖动状态，则对于除当前显示的元素之外的元素，其所处的状态为拖动状态。

加载模块，用于根据元素状态获取模块中元素的状态，为网页中在拖动轨迹上且处于拖动状态的浮动框架元素加载局部阻挡层；

接收拖动处理模块输出的加载信息，为该网页加载全局阻挡层，和/或，为该非拖动元素中包含的浮动框架元素加载局部阻挡层；

所加载的阻挡层屏蔽浮动框架元素的操作事件，并通过所加载的阻挡层归属的网页感知操作事件，触发所述输出触发信息的元素沿拖动轨迹拖动；

监测模块，用于在接收到网页中处于拖动状态的元素输出的触发信息后，向拖动处理模块输出拖动处理信息；

拖动处理模块，用于接收拖动处理信息，如果拖动轨迹上的非拖动元素中包含浮动框架元素，向加载模块输出加载信息。

较佳地，拖动处理模块进一步用于在拖动轨迹上的非拖动元素中不包含iframe元素时，向加载模块输出拖动信息，以使加载模块根据拖动信息触发所述输出触发信息的元素沿拖动轨迹拖动。

较佳地，该装置进一步包括：卸载模块，

所述监测模块，进一步用于在接收到所述输出触发信息的元素在脱离接触处输出的拖动终止信息后，向加载模块输出拖动处理终止信息；

所述加载模块，进一步用于接收拖动处理终止信息，触发输出触发信息的元素拖动至脱离接触处，向卸载模块输出卸载信息；

卸载模块，用于接收卸载信息，卸载加载的全局阻挡层以及局部阻挡层。

其中，

拖动处理模块包括：判断单元以及拖动处理单元（图中未示出），其中，

判断单元，用于判断接收的信息，如果是拖动处理信息，向拖动处理单元输出通知信息；如果是拖动处理终止信息，向第二触发单元输出通知信息；

拖动处理单元，用于接收通知信息，查询元素状态获取模块中的非拖动元素中是否包含iframe元素，如果包含iframe元素，向加载模块输出加载信息；如果不包含iframe元素，向加载模块输出拖动信息。

较佳地，加载模块包括：坐标信息获取单元、变化量获取单元以及拖动单元，其中，

坐标信息获取单元，用于按照预先设置的时间周期，获取操作事件的坐标信息；

变化量获取单元，用于计算坐标信息获取单元当前时间周期获取的操作事件坐标信息与上一次时间周期获取的操作事件坐标信息的变化量；

拖动单元，用于触发输出触发信息的元素根据变化量获取单元计算得到的变化量进行拖动。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换以及改进等，均应包含在本发明的保护范围之内。

Claims (14)

1.一种在内嵌浮动框架元素的网页中实现元素拖动的方法，其特征在于，

设置归属于网页、置于该网页所有元素的最顶层的全局阻挡层，所述全局阻挡层的尺寸不小于该网页窗口尺寸；以及，设置归属于所述网页、置于该浮动框架元素的上一层的局部阻挡层，所述局部阻挡层的尺寸不小于该浮动框架元素尺寸，该方法包括：

获取网页中各元素的状态，为网页中在拖动轨迹上且处于拖动状态的浮动框架元素加载局部阻挡层；

在接收到网页中处于拖动状态的元素输出的触发信息后，如果拖动轨迹上的非拖动元素中包含浮动框架元素，则为该网页加载全局阻挡层，和/或，为该非拖动元素中包含的浮动框架元素加载局部阻挡层；

所加载的阻挡层屏蔽浮动框架元素的操作事件，并通过所加载的阻挡层归属的网页感知操作事件，触发输出触发信息的所述元素沿拖动轨迹拖动。

2.如权利要求1所述的方法，其特征在于，进一步包括：

设置所述阻挡层为不遮挡查看该阻挡层的下一层元素内容的透明层。

3.如权利要求2所述的方法，其特征在于，进一步包括：

如果拖动轨迹上的非拖动元素中不包含浮动框架元素，触发输出触发信息的所述元素沿拖动轨迹拖动。

4.如权利要求1或2或3所述的方法，其特征在于，进一步包括：

在接收到所述输出触发信息的元素在脱离接触处输出的拖动终止信息后，触发所述输出触发信息的元素拖动至脱离接触处，卸载加载的全局阻挡层以及局部阻挡层。

5.如权利要求1所述的方法，其特征在于，所述触发输出触发信息的所述元素沿拖动轨迹拖动包括：

按照预先设置的时间周期，获取操作事件的坐标信息；

计算当前时间周期获取的操作事件坐标信息与上一次时间周期获取的操作事件坐标信息的变化量；

触发输出触发信息的元素根据计算得到的变化量进行拖动。

6.如权利要求1所述的方法，其特征在于，所述全局阻挡层以及局部阻挡层功能通过浮动层元素实现。

7.如权利要求6所述的方法，其特征在于，所述通过浮动层元素实现包括：通过脚本在网页中放入浮动层元素；

通过脚本设置浮动层元素的样式；

通过脚本设置该浮动层元素需要响应的操作事件。

8.如权利要求1所述的方法，其特征在于，所述网页中各元素按照相应元素对应的层在网页中的层叠顺序位，从高至低依序展示，所述最顶层对应的层叠顺序位最高，所述浮动框架元素对应的层的上一层对应的层叠顺序位高于浮动框架元素对应的层的层叠顺序位。

9.如权利要求1所述的方法，其特征在于，预先设置网页中当前显示的元素的状态为非拖动状态，除当前显示的元素之外的元素，设置其所处的状态为拖动状态。

10.一种在内嵌浮动框架元素的网页中实现元素拖动的装置，其特征在于，该装置包括：元素状态获取模块、加载模块、监测模块以及拖动处理模块，其中，

元素状态获取模块，用于获取网页中各元素的状态；

加载模块，用于根据元素状态获取模块中元素的状态，为网页中在拖动轨迹上且处于拖动状态的浮动框架元素加载局部阻挡层，所述局部阻挡层的尺寸不小于该浮动框架元素尺寸；

接收拖动处理模块输出的加载信息，为该网页加载全局阻挡层，所述全局阻挡层的尺寸不小于该网页窗口尺寸，和/或，为该非拖动元素中包含的浮动框架元素加载局部阻挡层，所述局部阻挡层的尺寸不小于该浮动框架元素尺寸；

所加载的阻挡层屏蔽浮动框架元素的操作事件，并通过所加载的阻挡层归属的网页感知操作事件，触发输出触发信息的元素沿拖动轨迹拖动；

监测模块，用于在接收到网页中处于拖动状态的元素输出的触发信息后，向拖动处理模块输出拖动处理信息；

拖动处理模块，用于接收拖动处理信息，如果拖动轨迹上的非拖动元素中包含浮动框架元素，向加载模块输出加载信息。

11.如权利要求10所述的装置，其特征在于，所述拖动处理模块进一步用于在拖动轨迹上的非拖动元素中不包含浮动框架元素时，向加载模块输出拖动信息，以使加载模块根据拖动信息触发所述输出触发信息的元素沿拖动轨迹拖动。

12.如权利要求10所述的装置，其特征在于，进一步包括：卸载模块，

所述监测模块，进一步用于在接收到所述输出触发信息的元素在脱离接触处输出的拖动终止信息后，向加载模块输出拖动处理终止信息；

所述加载模块，进一步用于接收拖动处理终止信息，触发所述输出触发信息的元素拖动至脱离接触处，向卸载模块输出卸载信息；

卸载模块，用于接收卸载信息，卸载加载的全局阻挡层以及局部阻挡层。

13.如权利要求12所述的装置，其特征在于，所述拖动处理模块包括：判断单元以及拖动处理单元，其中，

判断单元，用于判断接收的信息，如果是拖动处理信息，向拖动处理单元输出通知信息；如果是拖动处理终止信息，向第二触发单元输出通知信息；

拖动处理单元，用于接收通知信息，查询元素状态获取模块中的非拖动元素中是否包含浮动框架元素，如果包含浮动框架元素，向加载模块输出加载信息；如果不包含浮动框架元素，向加载模块输出拖动信息。

14.如权利要求12所述的装置，其特征在于，所述加载模块包括：坐标信息获取单元、变化量获取单元以及拖动单元，其中，

坐标信息获取单元，用于按照预先设置的时间周期，获取操作事件的坐标信息；

变化量获取单元，用于计算坐标信息获取单元当前时间周期获取的操作事件坐标信息与上一次时间周期获取的操作事件坐标信息的变化量；

拖动单元，用于触发输出触发信息的元素根据变化量获取单元计算得到的变化量进行拖动。