显示页面中数据的转移方法及装置制造方法及图纸

本申请公开了一种显示页面中数据的转移方法及装置。其中，该方法包括：触发显示页面中第一区域内的一个或多个源元素的按键按下事件；根据按键按下事件获取与一个或多个源元素关联的数据，并将数据缓存在第一区域内的一个或多个源元素上；触发显示页面中第二区域内的目标元素的按键抬起事件；根据按键抬起事件查询与目标元素对应的源元素，并获取缓存在与目标元素对应的源元素上的数据；将与目标元素对应的源元素上的数据缓存在目标元素上。本申请解决了现有技术在实现页面中元素转移时效率低的技术问题。

【技术实现步骤摘要】

本申请涉及计算机领域，具体而言，涉及一种显示页面中数据的转移方法及装置。
技术介绍
开发人员在使用web开发平台时常常要进行重复设计，比如，在不同的区域中设计同样的表单、参照性表单、结构化数据录入表单，或者，开发人员希望将一个区域的结构、格局复制到另一个区域中，这就需要开发人员将相同的结构内容进行重复性的手动录入，但是手动的录入在工作量大的时候容易出错且不能满足不同区域数据之间的关联。面对上述繁琐的工作量，开发人员可以选择使用HTML5，比如开发人员采用HTML5来对页面中的DOM元素进行拖放，即抓取对象以后拖到另一个位置，例如，首先在DOM元素的属性上加上draggable＝true,然后在拖动的同时，通过在DOM元素上注册事件ondragstart来记录被拖动的元素，进而实现页面中不同区域间DOM元素的拖动。需要说明的是，使用HTML5来对页面中的元素进行拖放会出现如下问题：1)不能解决源元素和目标元素要求的渲染数据不一致的问题，即用户只能在渲染数据相同的两个DOM元素之间进行数据的转移。2)HTML5不支持多个DOM的移动，只能对逐个DOM元素进行移动，移动时间较长。3)HTML5对部分浏览器不兼容，比如IE6、IE7、IE8以及更替版本的浏览器，用户欲使用HTML5L来转移DOM元素还要更新浏览器的版本。由上可知，针对上述现有技术在实现页面中元素转移时效率低的问题，目前尚未提出有效的解决方案。
技术实现思路
本专利技术实施例提供了一种显示页面中数据的转移方法及装置，以至少解决现有技术在实现页面中元素转移时效率低的技术问题。根据本专利技术实施例的一个方面，提供了一种显示页面中数据的转移方法，包括：触发显示页面中第一区域内的一个或多个源元素的按键按下事件；根据按键按下事件获取与一个或多个源元素关联的数据，并将数据缓存在第一区域内的一个或多个源元素上；触发显示页面中第二区域内的目标元素的按键抬起事件；根据按键抬起事件查询与目标元素对应的源元素，并获取缓存在与目标元素对应的源元素上的数据；将与目标元素对应的源元素上的数据缓存在目标元素上。根据本专利技术实施例的另一方面，还提供了一种显示页面中数据的转移装置，包括：第一触发单元，用于触发显示页面中第一区域内的一个或多个源元素的按键按下事件；获取单元，用于根据按键按下事件获取与一个或多个源元素关联的数据，并将数据缓存在第一区域内的一个或多个源元素上；第二触发单元，用于触发显示页面中第二区域内的目标元素的按键抬起事件；查询单元，用于根据按键抬起事件查询与目标元素对应的源元素，并获取缓存在与目标元素对应的源元素上的数据；缓存单元，用于将与目标元素对应的源元素上的数据缓存在目标元素上。在本专利技术实施例中，采用触发显示页面中第一区域内的一个或多个源元素的按键按下事件；根据按键按下事件获取与一个或多个源元素关联的数据，并将数据缓存在第一区域内的一个或多个源元素上；触发显示页面中第二区域内的目标元素的按键抬起事件；根据按键抬起事件查询与目标元素对应的源元素，并获取缓存在与目标元素对应的源元素上的数据；将与目标元素对应的源元素上的数据缓存在目标元素上的方式，解决了现有技术在实现页面中元素转移时效率低的技术问题。附图说明此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1是根据本专利技术实施例的一种显示页面中数据的转移方法的计算机终端的硬件结构框图；图2是根据本申请实施例的一种可选的显示页面中数据的转移方法的流程图；图3是根据本申请实施例的显示页面中数据的转移方法的示意图；图4是根据本申请实施例的一种可选的显示页面中数据的转移方法的示意图；图5是根据本申请实施例的一种可选的显示页面中数据的转移方法的示意图；图6是根据本申请实施例的一种可选的显示页面中数据的转移方法的示意图；图7是根据本申请实施例的显示页面中数据的转移装置的结构示意图；图8是根据本申请实施例的可选的显示页面中数据的转移装置的结构示意图；图9是根据本申请实施例的可选的显示页面中数据的转移装置的结构示意图；图10是根据本申请实施例的可选的显示页面中数据的转移装置的结构示意图；图11是根据本申请实施例的可选的显示页面中数据的转移装置的结构示意图；图12是根据本申请实施例的可选的显示页面中数据的转移装置的结构示意图；图13是根据本申请实施例的可选的显示页面中数据的转移装置的结构示意图；图14是根据本申请实施例的可选的显示页面中数据的转移装置的结构示意图；图15是根据本申请实施例的可选的显示页面中数据的转移装置的结构示意图；以及图16是根据本申请实施例的一种计算机终端的结构框图。具体实施方式为了使本
的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请中涉及到的名词解释如下：DOM，文档对象模型(DocumentObjectModel，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。鼠标事件：是VisualBasic编程中最常用到的事件，多数控件都支持鼠标操作，鼠标事件主要包括：MouseDown以及MouseUp，其中，MouseDown为鼠标按下时发生的事件，MouseUp为鼠标抬起时发生的事件。键盘事件：是在键盘的某个键按下去时触发的事件，键盘事件主要有以下几种：(1)KeyDown：当键盘上某键被按下去时发生。(2)KeyUp：键盘上的键抬起来时发生。(3)KeyPree：此事件发生在键盘被按下后和字符被显示出来之前发生。DIV容器(DIV标签)：是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签来控制。实施例1根据本申请实施例，还提供了一种显示页面中数据的转移方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。本申请实施例一所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。以运行在计算机终端上为例，图1是本申请实施例的一种显示页面中数本文档来自技高网...

【技术保护点】
一种显示页面中数据的转移方法，其特征在于，包括：触发显示页面中第一区域内的一个或多个源元素的按键按下事件；根据所述按键按下事件获取与所述一个或多个源元素关联的数据，并将所述数据缓存在所述第一区域内的所述一个或多个源元素上；触发所述显示页面中第二区域内的目标元素的按键抬起事件；根据所述按键抬起事件查询与所述目标元素对应的源元素，并获取缓存在与所述目标元素对应的源元素上的数据；将与所述目标元素对应的源元素上的数据缓存在所述目标元素上。

【技术特征摘要】
1.一种显示页面中数据的转移方法，其特征在于，包括：触发显示页面中第一区域内的一个或多个源元素的按键按下事件；根据所述按键按下事件获取与所述一个或多个源元素关联的数据，并将所述数据缓存在所述第一区域内的所述一个或多个源元素上；触发所述显示页面中第二区域内的目标元素的按键抬起事件；根据所述按键抬起事件查询与所述目标元素对应的源元素，并获取缓存在与所述目标元素对应的源元素上的数据；将与所述目标元素对应的源元素上的数据缓存在所述目标元素上。2.根据权利要求1所述的方法，其特征在于，当鼠标或键盘的指针放在所述第一区域内的一个或多个元素的上方，并检测到所述鼠标的按键或所述键盘的按键被按下之后，触发所述按键按下事件。3.根据权利要求1所述的方法，其特征在于，当鼠标或键盘的指针放在所述第二区域内的所述目标元素的上方，并检测到所述鼠标的按键或所述键盘的按键被抬起之后，触发所述按键抬起事件。4.根据权利要求3所述的方法，其特征在于，在触发所述按键抬起事件之前，所述方法还包括：在所述鼠标的按键或所述键盘的按键保持按下的状态下，控制所述鼠标或键盘的指针移动至所述显示页面中的所述第二区域；其中，在任意时刻，如果检测到所述鼠标或按键的指针移动至所述第二区域内的目标元素的上方，且所述鼠标的按键或所述键盘的按键被抬起，则启动触发所述第二区域内的目标元素的按键抬起事件。5.根据权利要求3所述的方法，其特征在于，在触发所述按键抬起事件之前，所述方法还包括：在所述鼠标的按键或所述键盘的按键保持按下的状态下，控制所述鼠标或键盘的指针移动至所述显示页面中的第三区域，其中，所述第三区域为所述显示页面中除所述目标元素之外的任意一个区域，且在所述第三区域中触发的按键抬起事件或点击事件都无法启动查询与所述目标元素对应的源元素；在任意时刻，如果检测到所述鼠标或按键的指针从所述第三区域移动至所述第二区域内的目标元素的上方，且所述鼠标的按键或所述键盘的按键被抬起，则启动触发所述第二区域内的目标元素的按键抬起事件。6.根据权利要求1至5中任意一项所述的方法，其特征在于，在触发显示页面中第一区域内的一个或多个源元素的按键按下事件之前，所述方法还包括：设置所述第一区域内的每一个源元素的拖出属性的属性值，并设置所述第二区域内的每一个目标元素的拖入属性的属性值；其中，根据所述按键抬起事件查询与所述目标元素对应的源元素的步骤包括：如果检测到所述目标元素的按键抬起事件被触发，则读取所述目标元素的拖入属性的属性值；通过查找到拖出属性的属性值与所述目标元素的拖入属性的属性值相同的源元素，确定与所述目标元素对应的源元素。7.根据权利要求6所述的方法，其特征在于，在将所述数据缓存在所述第一区域内的所述一个或多个源元素上之后，所述方法还包括：如果检测到缓存了数据的源元素发生了拖拽动作，则将发生了所述拖拽动作的源元素的拖拽属性的属性值设置为ture，其中，在查找到拖出属性的属性值与所述目标元素的拖入属性的属性值相同的源元素之后，如果所述源元素的拖拽属性的属性值为ture，则确定所述拖拽属性的属性值为ture的源元素为与所述目标元素对应的源元素。8.根据权利要求7所述的方法，其特征在于，在将与所述目标元素对应的源元素上的数据缓存在所述目标元素上之后，所述方法还包括：删除所述源元素的拖拽属性的属性值，并清除所述源元素上缓存的数据。9.根据权利要求1所述的方法，其特征在于，在获取缓存在与所述目标元素对应的源元素上的数据之后，所述方法还包括：根据所述目标元素的元素信息访问目标服务器；接收所述目标服务器根据所述元素信息获取到的目标数据；将所述目标数据以及与所述目标元素对应的源元素上的数据都缓存在所述目标元素上。10.根据权利要求1或9所述的方法，其特征在于，在获取缓存在与所述目标元素对应的源元素上的数据之后，所述方法还包括：在所述显示页面的第二区域中渲染所述目标元素。11.根据权利要求9所述的方法，其特征在于，在将所述目标数据以及与所述目标元素对应的源元素上的数据都缓存在所述目标元素上之后，所述方法还包括：将所述目标元素上缓存的所述目标数据和与所述目标元素对应的所述源元素的数据进行打包，生成所述目标元素的更新数据；将所述目标...

【专利技术属性】
技术研发人员：杨剑，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY