CN103177014A - 网页中控制界面组件的方法及*** - Google Patents

Abstract

一种网页中控制界面组件的方法，包括如下步骤：获取网页中应用的界面组件的拖拽事件；通过所述拖拽事件按照所述界面组件创建交互组件；将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽；通过所述拖拽的交互组件发生的释放操作使所述交互组件停留于网页中。上述网页中控制界面组件的方法及***，通过应用的界面组件的拖拽事件在网页中创建交互组件，并通过拖拽事件中的释放操作使交互组件停留在网页中，实现了网页中应用与网页之间的交互，进而通过网页上的交互组件也能实现界面组件在应用中的功能，提高了操作上的方便性。

Description

网页中控制界面组件的方法及***

【技术领域】

本发明涉及数据处理技术，特别是涉及一种网页中控制界面组件的方法及***。

【背景技术】

在计算机交互中常常通过感知用户的操作手势来快捷地实现各种功能，相应的，对应用程序中的图标等元素进行拖拽移动至桌面以实现相应文件的移动、复制或其它功能，大大简化了用户操作，提高了操作上的方便性。

随着各种网络应用的发展，也能够通过浏览器所加载的网页来实现越来越多本地应用中的功能，以方便用户不需要进行下载安装通过网页中的网络应用即可使用原本安装于计算机本地的各种应用，并实现相应功能。例如，在网页中可开启即时通信工具，用户通过在网页中即时通信工具界面的操作来也能够实现安装于计算机本地的即时通信工具的功能。

然而，网页与网络应用之间并不能够像常用的计算机交互一样，实现应用中界面组件从应用到网页的拖拽移动，必须通过一系列较为复杂的添加组件操作方可将应用中的界面组件添加到网页中，操作上较不方便。

【发明内容】

基于此，有必要提供一种能提高操作上的方便性的网页中控制界面组件的方法。

此外，还有必要提供一种能提高操作上的方便性的网页中控制界面组件的***。

一种网页中控制界面组件的方法，包括如下步骤：

获取网页中应用的界面组件的拖拽事件；

通过所述拖拽事件按照所述界面组件创建交互组件；

将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽；

通过所述拖拽的交互组件发生的释放操作使所述交互组件停留于网页中。

优选地，所述通过所述拖拽事件在所述网页中按照界面组件创建交互组件的步骤为：

根据所述拖拽事件中发生的选定操作获取选定的界面组件；

按照所述选定的界面组件在所述网页中创建交互组件。

优选地，所述通过所述拖拽事件在所述网页中按照界面组件创建交互组件的步骤为：

获取拖拽事件中发生拖动的界面组件；

按照所述拖动的界面组件在所述网页中创建交互组件。

优选地，所述将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽的步骤之后还包括：

根据所述拖拽事件移动所述交互组件。

优选地，所述根据所述拖拽事件移动所述交互组件的步骤为：

通过网页获取所述拖拽事件中发生的连续拖动得到拖动轨迹；

根据所述拖动轨迹在所述网页中移动所述交互组件。

一种网页中控制界面组件的***，包括：

事件获取模块，用于获取网页中应用的界面组件的拖拽事件；

创建模块，用于通过所述拖拽事件按照所述界面组件创建交互组件；

变换模块，用于将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽；

组件释放模块，用于通过所述拖拽的交互组件发生的释放操作使所述交互组件停留于网页中。

优选地，所述创建模块包括：

选定单元，用于根据所述拖拽事件中发生的选定操作获取选定的界面组件；

第一组件创建单元，用于按照所述选定的界面组件在所述网页中创建交互组件。

优选地，所述创建模块包括：

组件获取单元，用于获取拖拽事件中发生拖动的界面组件；

第二组件创建单元，用于按照所述拖动的界面组件在所述网页中创建交互组件。

优选地，还包括：

移动控制模块，用于根据所述拖拽事件移动所述交互组件。

优选地，所述移动控制模块包括：

轨迹获取单元，用于通过网页获取所述拖拽事件中发生的连续拖动得到拖动轨迹；

组件移动单元，用于根据所述拖动轨迹在所述网页中移动所述交互组件。

上述网页中控制界面组件的方法及***，通过应用的界面组件的拖拽事件在网页中创建交互组件，并通过拖拽事件中的释放操作使交互组件停留在网页中，实现了网页中应用与网页之间的交互，进而通过网页上的交互组件也能实现界面组件在应用中的功能，提高了操作上的方便性。

【附图说明】

图1为一个实施例中网页中控制界面组件的方法流程图；

图2为一个实施例中获取网页中应用的界面组件的拖拽事件的方法流程图；

图3为另一个实施例中获取网页中应用的界面组件的拖拽事件的方法流程图；

图4为一个实施例中根据拖拽事件移动交互组件的方法流程图；

图5为一个实施例中的网页示意图；

图6为图6中拖拽界面组件的网页示意图；

图7为图7中交互界面停留网页的示意图；

图8为一个实施例中网页中控制界面组件的***结构示意图；

图9为一个实施例中创建模块的结构示意图；

图10为另一个实施例中创建模块的结构示意图；

图11为另一个实施例中网页中控制界面组件的结构示意图；

图12为图11中移动控制模块的结构示意图；

图13为一个实施例中网页页面和即时通信工具的界面示意图；

图14为图13中对组件进行拖拽的示意图；

图15为图14中拖拽操作结束后的示意图。

【具体实施方式】

在一个实施例中，如图1所示，一种网页中控制界面组件的方法，包括如下步骤：

步骤S110，获取网页中应用的界面组件的拖拽事件。

本实施例中，网页中的应用为置于网页中的各种网络应用，可为flash脚本。界面组件为网页中应用所在界面中的某一元素，用于实现应用的某一功能，可以是图片、视频或声音的形式，也可以代码集合。

具体的，可通过鼠标的拖拽或触摸屏幕中用户施加于界面组件的滑动输入拖拽事件实现应用所在界面中某一界面组件的拖拽。拖拽事件可以是一系列连续的操作，包括界面组件的选定操作、拖动操作以及释放操作，例如，在一界面组件的拖拽事件中，用户按下鼠标触发界面组件的选定操作，并通过鼠标的滑动进行界面组件的拖动，在将界面组件拖动至某一位置时松开鼠标释放拖拽的界面组件完成整个拖拽事件。

步骤S130，通过拖拽事件按照界面组件创建交互组件。

本实施例中，触发拖拽事件时，按照界面组件在网页中创建交互组件，并为创建的交互组件设置相应的属性，例如，交互组件的属性可以是交互组件在网页中的位置信息。

在一个实施例中，如图2所示，上述步骤S130的具体过程为：

步骤S131，根据拖拽事件中发生的选定操作获取选定的界面组件。

本实施例中，在拖拽事件中根据界面组件的选定操作即可获知应用所在界面发生了拖拽操作，进而确定用户的拖拽操作所作用的对象是应用所在界面中哪一界面组件。

步骤S133，按照选定的界面组件在网页中创建交互组件。

本实施例中，在网页中创建与选定的界面组件相对应的交互组件，这一创建的交互组件拥有与选定的界面组件相一致的功能。

在另一个实施例中，如图3所示，上述步骤S130的具体过程为：

步骤S135，获取拖拽事件中发生拖动的界面组件。

本实施例中，应用所在界面发生的拖拽事件中，在选定了界面组件之后，通过对选定的界面组件所触发的拖动操作获取该拖动操作的对象，即拖拽事件中发生了拖动的界面组件。

步骤S137，按照拖动的界面组件在网页中创建交互组件。

本实施例中，根据发生了拖动的界面组件，在网页中进行交互组件的创建，所创建的交互组件将拥有与发生了拖动的界面组件相一致的功能。

步骤S150，将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽。

本实施例中，随着界面组件在应用所在界面中的滑动，当界面组件即将滑出应用所在界面时，拖拽操作所施加的对象将由界面组件变换为网页中创建的交互组件。对用户而言，在视觉上从应用所在界面到网页所发生的拖拽事件作用的对象为同一组件，但实际上在应用所在界面的范围内，拖拽事件作用的对象为界面组件，而在应用所在界面的范围之后的网页中，拖拽事件作用的对象将被变换为交互组件。

在另一个实施例中，上述步骤S150之后还包括根据拖拽事件移动交互组件的步骤。

本实施例中，交互组件将跟随拖拽事件所产生的拖动轨迹在网页中移动，以产生交互组件随着鼠标或触摸屏幕中发生的移动而进行移动的视觉效果，进而通过这一视觉效果向用户反馈发生的拖拽事件，提高网页中的交互性。

在一个实施例中，如图4所示，上述根据拖拽事件移动交互组件的步骤包括：

步骤S401，通过网页获取拖拽事件中发生的连续拖动得到拖动轨迹。

本实施例中，通过网页获取拖拽事件在网页中产生的拖动轨迹，具体的，可通过网页对拖拽事件进行监听，以获取到拖拽事件中发生的连续拖动的拖动轨迹，例如，可实时获取鼠标所对应的指针位置来得到相应的拖动轨迹。

步骤S403，根据拖动轨迹在网页中移动交互组件。

本实施例中，按照拖动轨迹在网页中控制交互组件的移动，例如，根据鼠标所对应的指针位置，实时设定交互组件的位置，实现交互组件跟随指针移动的视觉效果。

步骤S170，通过拖拽的交互组件发生的释放操作使交互组件停留于网页中。

本实施例中，在拖拽事件结束时交互组件中将发生释放操作，此时交互组件将被置于网页中，而交互组件在网页中的位置可以是网页中预先设置的某一位置，也可以根据交互组件被释放时在网页中的位置确定。通过拖拽的方式在网页中添加应用中界面组件的快捷方式，即通过停留于网页中的交互组件便可实现界面组件在应用中的功能，使得用户不需要在网页中开启应用所在的界面，通过触发网页中的交互组件就可以实现相应的界面组件在应用中的功能，大大地提高了操作上的方便性。

下面结合一个具体的实施例来详细阐述上述网页中控制界面组件的方法。该实施例中，如图5所示，在网页510的某一应用530所在界面中，界面组件550为应用530所在界面中的组成部分，在用户对界面组件550施加了拖拽操作时，如图6所示，获取拖拽事件，并在网页510中创建交互组件610，界面组件550跟随拖拽操作在应用530所在界面中滑动，在滑出应用530所在界面时，拖拽事件的作用对象变换为交互组件610，此时，交互组件610跟随着拖拽操作在网页510中滑动，当被释放时交互组件610将会停留于网页中如图7所示，完成了应用与所在网页之间的通讯，将应用中的组件拖拽到网页中，简化网页中某一组件的快捷方式的产生过程，也提高了用户在操作上的方便性。

在一个实施例中，如图8所示，一种网页中控制界面组件的***，包括事件获取模块10、创建模块30、变换模块50以及组件释放模块70。

事件获取模块10，用于获取网页中应用的界面组件的拖拽事件。

本实施例中，网页中的应用为置于网页中的各种网络应用，可为flash脚本。界面组件为网页中应用所在界面中的某一元素，用于实现应用的某一功能，可以是图片、视频或声音的形式，也可以代码集合。

具体的，可通过鼠标的拖拽或触摸屏幕中用户施加于界面组件的滑动输入拖拽事件实现应用所在界面中某一界面组件的拖拽。拖拽事件可以是一系列连续的操作，包括界面组件的选定操作、拖动操作以及释放操作，例如，在一界面组件的拖拽事件中，用户按下鼠标触发界面组件的选定操作，并通过鼠标的滑动进行界面组件的拖动，在将界面组件拖动至某一位置时松开鼠标释放拖拽的界面组件完成整个拖拽事件。

创建模块30，用于通过拖拽事件按照界面组件创建交互组件。

本实施例中，触发拖拽事件时，创建模块30按照界面组件在网页中创建交互组件，并为创建的交互组件设置相应的属性，例如，交互组件的属性可以是交互组件在网页中的位置信息。

在一个实施例中，如图9所示，上述创建模块30包括选定单元310以及第一组件创建单元330。

选定单元310，用于根据拖拽事件中发生的选定操作获取选定的界面组件。

本实施例中，选定单元310在拖拽事件中根据界面组件的选定操作即可获知应用所在界面发生了拖拽操作，进而确定用户的拖拽操作所作用的对象是应用所在界面中哪一界面组件。

第一组件创建单元330，用于按照选定的界面组件在网页中创建交互组件。

本实施例中，第一组件创建单元330在网页中创建与选定的界面组件相对应的交互组件，这一创建的交互组件拥有与选定的界面组件相一致的功能。

在另一个实施例中，如图10所示，上述创建模块30包括组件获取单元350以及第二组件创建单元370。

组件获取单元350，用于获取拖拽事件中发生拖动的界面组件。

本实施例中，应用所在界面发生的拖拽事件中，在选定了界面组件之后，组件获取单元350通过对选定的界面组件所触发的拖动操作获取该拖动操作的对象，即拖拽事件中发生了拖动的界面组件。

第二组件创建单元370，用于按照拖动的界面组件在网页中创建交互组件。

本实施例中，第二组件创建单元370根据发生了拖动的界面组件，在网页中进行交互组件的创建，所创建的交互组件将拥有与发生了拖动的界面组件相一致的功能。

变换模块50，用于将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽。

本实施例中，随着界面组件在应用所在界面中的滑动，当界面组件即将滑出应用所在界面时，变换模块50将拖拽操作所施加的对象由界面组件变换为网页中创建的交互组件。对用户而言，在视觉上从应用所在界面到网页所发生的拖拽事件作用的对象为同一组件，但实际上在应用所在界面的范围内，拖拽事件作用的对象为界面组件，而在应用所在界面的范围之后的网页中，拖拽事件作用的对象将被变换为交互组件。

在另一个实施例中，如图11所示，上述网页中控制界面组件的***还包括移动控制模块90。

移动控制模块90，用于根据拖拽事件移动交互组件。

本实施例中，移动控制模块90将控制交互组件跟随拖拽事件所产生的拖动轨迹在网页中移动，以产生交互组件随着鼠标或触摸屏幕中发生的移动而进行移动的视觉效果，进而通过这一视觉效果向用户反馈发生的拖拽事件，提高网页中的交互性。

在一个实施例中，如图12所示，上述移动控制模块90包括轨迹获取单元910以及组件移动单元930。

轨迹获取单元910，用于通过网页获取拖拽事件中发生的连续拖动得到拖动轨迹。

本实施例中，轨迹获取单元910通过网页获取拖拽事件在网页中产生的拖动轨迹，具体的，轨迹获取单元910可通过网页对拖拽事件进行监听，以获取到拖拽事件中发生的连续拖动的拖动轨迹，例如，轨迹获取单元910可实时获取鼠标所对应的指针位置来得到相应的拖动轨迹。

组件移动单元930，用于根据拖动轨迹在网页中移动交互组件。

本实施例中，组件移动单元930按照拖动轨迹在网页中控制交互组件的移动，例如，组件移动单元930根据鼠标所对应的指针位置，实时设定交互组件的位置，实现交互组件跟随指针移动的视觉效果。

组件释放模块70，用于通过拖拽的交互组件发生的释放操作使交互组件停留于网页中。

本实施例中，在拖拽事件结束时交互组件中将发生释放操作，此时组件释放模块70将交互组件置于网页中，而交互组件在网页中的位置可以是网页中预先设置的某一位置，也可以根据交互组件被释放时在网页中的位置确定。通过拖拽的方式在网页中添加应用中界面组件的快捷方式，即通过停留于网页中的交互组件便可实现界面组件在应用中的功能，使得用户不需要在网页中开启应用所在的界面，通过触发网页中的交互组件就可以实现相应的界面组件在应用中的功能，大大地提高了操作上的方便性。

下面结合一个具体的应用来详细描述上述网页中控制界面组件的方法及***。如图13所示，运行于网页页面131中的应用为即时通信工具133，也就是说，即时通信工具133是以Flash面板的形式存在于网页页面131中的，并且即时通信工具133中的每一元素都可作为界面组件，如图标135所示，进而通过用户的拖拽操作从Flash面板中拖拽到网页页面131上。

具体地，用户拖拽即时通信工具133上的图标135的过程中，事件获取模块10获取网页页面131中即时通信工具133的图标135发生的拖拽事件，此时，即时通信工具133将图标135所发生的拖拽事件通知网页页面131，即创建模块30通过拖拽事件按照图标135在网页页面中创建交互组件，该交互组件为网页页面131中图标135的快捷方式。

如图14所示，在即时通信工具中，图标135跟随用户的拖拽操作进行滑动，若滑出即时通信工具133的界面则拖拽操作的对象将被变换模块50变换为交互组件141，此时，移动控制模块90控制交互组件141进行移动，并在获取到交互组件141中发生的释放操作时组件释放模块70将交互组件141停留于页面页面131中，如图15所示，实现了即时通信工具133和网页页面131之间组件的拖拽移动。

上述网页中控制界面组件的方法及***，通过应用的界面组件的拖拽事件在网页中创建交互组件，并通过拖拽事件中的释放操作使交互组件停留在网页中，实现了网页中应用与网页之间的交互，进而通过网页上的交互组件也能实现界面组件在应用中的功能，提高了操作上的方便性。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种网页中控制界面组件的方法，包括如下步骤：

获取网页中应用的界面组件的拖拽事件；

通过所述拖拽事件按照所述界面组件创建交互组件；

将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽；

通过所述拖拽的交互组件发生的释放操作使所述交互组件停留于网页中。

2.根据权利要求1所述的网页中控制界面组件的方法，其特征在于，所述通过所述拖拽事件在所述网页中按照界面组件创建交互组件的步骤为：

根据所述拖拽事件中发生的选定操作获取选定的界面组件；

按照所述选定的界面组件在所述网页中创建交互组件。

3.根据权利要求1所述的网页中控制界面组件的方法，其特征在于，所述通过所述拖拽事件在所述网页中按照界面组件创建交互组件的步骤为：

获取拖拽事件中发生拖动的界面组件；

按照所述拖动的界面组件在所述网页中创建交互组件。

4.根据权利要求1所述的网页中控制界面组件的方法，其特征在于，所述将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽的步骤之后还包括：

根据所述拖拽事件移动所述交互组件。

5.根据权利要求4所述的网页中控制界面组件的方法，其特征在于，所述根据所述拖拽事件移动所述交互组件的步骤为：

通过网页获取所述拖拽事件中发生的连续拖动得到拖动轨迹；

根据所述拖动轨迹在所述网页中移动所述交互组件。

6.一种网页中控制界面组件的***，其特征在于，包括：

事件获取模块，用于获取网页中应用的界面组件的拖拽事件；

创建模块，用于通过所述拖拽事件按照所述界面组件创建交互组件；

变换模块，用于将界面组件中发生的滑出应用所在界面的拖拽变换为交互组件的拖拽；

组件释放模块，用于通过所述拖拽的交互组件发生的释放操作使所述交互组件停留于网页中。

7.根据权利要求6所述的网页中控制界面组件的***，其特征在于，所述创建模块包括：

选定单元，用于根据所述拖拽事件中发生的选定操作获取选定的界面组件；

第一组件创建单元，用于按照所述选定的界面组件在所述网页中创建交互组件。

8.根据权利要求6所述的网页中控制界面组件的***，其特征在于，所述创建模块包括：

组件获取单元，用于获取拖拽事件中发生拖动的界面组件；

第二组件创建单元，用于按照所述拖动的界面组件在所述网页中创建交互组件。

9.根据权利要求6所述的网页中控制界面组件的***，其特征在于，还包括：

移动控制模块，用于根据所述拖拽事件移动所述交互组件。

10.根据权利要求9所述的网页中控制界面组件的***，其特征在于，所述移动控制模块包括：

轨迹获取单元，用于通过网页获取所述拖拽事件中发生的连续拖动得到拖动轨迹；

组件移动单元，用于根据所述拖动轨迹在所述网页中移动所述交互组件。

Images