CN114237599A - 一种实现元素拖放的方法、装置及电子设备 - Google Patents

一种实现元素拖放的方法、装置及电子设备 Download PDF

Info

Publication number
CN114237599A
CN114237599A CN202111550791.1A CN202111550791A CN114237599A CN 114237599 A CN114237599 A CN 114237599A CN 202111550791 A CN202111550791 A CN 202111550791A CN 114237599 A CN114237599 A CN 114237599A
Authority
CN
China
Prior art keywords
drag
drop
target
style
acquiring
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111550791.1A
Other languages
English (en)
Inventor
周振洋
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Honghe Aixue Education Technology Co ltd
Original Assignee
Beijing Honghe Aixue Education Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Honghe Aixue Education Technology Co ltd filed Critical Beijing Honghe Aixue Education Technology Co ltd
Priority to CN202111550791.1A priority Critical patent/CN114237599A/zh
Publication of CN114237599A publication Critical patent/CN114237599A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供一种实现元素拖放的方法、装置及电子设备，该方法包括：捕获拖放触发事件；响应于所述拖放触发事件，确定目标拖放元素，以及所述目标拖放元素的内容样式；在拖放过程中根据所述内容样式展示所述目标拖放元素。在触发拖放结束事件的情况下，获取目标拖放元素的位置信息；响应用户的输入值，获取目标拖放元素的设置信息；根据所述目标拖放元素的设置信息，设置目标拖放元素的样式和/或位置。通过自定义拖放过程中的元素样式，实现一个相对灵活的，可设置，可自定义的拖拽动画效果。通过微调元素在模板中的位置，实现精准拖放。可反复拖放同一元素，以实现调整修改。

Description

一种实现元素拖放的方法、装置及电子设备
技术领域
本发明涉及计算机技术领域，具体涉及实现元素拖放的方法、装置及电子设备。
背景技术
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一，广泛应用于互联网应用的开发。
拖放是很常见的特性，它指的是用户通过触控或鼠标抓取某物并拖入不同的位置。现有的HTML5 Drag拖放技术中存在的问题至少有：拖放过程中的元素大小和拖放前的元素是一致的，不够灵活。
发明内容
本申请旨在提供一种实现元素拖放的方法、装置及电子设备，通过自定义拖放时元素的样式和文案，可修改元素的样式；拖放结束后，点击对应元素，可以设置元素位置，字体大小和文字字体以及图片大小；在区域内的元素可以反复拖放移动定位到拖放处。
根据本申请的另一方面，提供一种实现元素拖放的方法，包括：
捕获拖放触发事件；
响应于所述拖放触发事件，确定目标拖放元素，以及所述目标拖放元素的内容样式；
在拖放过程中根据所述内容样式展示所述目标拖放元素。
根据一些实施例，所述方法还包括：在触发拖放结束事件的情况下，获取目标拖放元素的位置信息；
响应用户的输入值，获取目标拖放元素的设置信息；
根据所述目标拖放元素的设置信息，设置目标拖放元素的样式和/或位置。
根据一些实施例，所述方法包括：获取模板容器，用于容置拖放元素；
在触发拖放结束事件的情况下，获取所述模板容器中的拖放元素。
根据一些实施例，所述方法包括：
捕捉模板容器内的拖放触发事件；
根据拖放触发的位置，获取目标拖放元素和目标拖放元素的内容样式；
删除所述模板容器中对应的拖放元素；
在拖放过程中根据所述内容样式展示目标拖放元素。
根据一些实施例，所述方法包括：
在触发拖放结束事件的情况下，获取目标拖放元素的位置信息；
响应用户的输入值，获取目标拖放元素的设置信息；
根据所述目标拖放元素的设置信息，设置目标拖放元素的样式和/或位置。
根据一些实施例，所述方法包括：
所述确定目标拖放元素，以及所述目标拖放元素的内容样式包括：
获取用户界面的第一元素数据；
根据所述第一元素数据，得到对应的数据值，以确定所述目标拖放元素的内容。
根据本申请的另一方面，提供一种实现元素拖放的装置，包括：
获取模块，用于获取可拖放的元素数据；
捕捉模块，用于捕捉拖放触发事件；
样式获取模块，用于响应于所述拖放触发事件，确定目标拖放元素，以及所述目标拖放元素的内容样式；
展示模块，用于在拖放过程中根据所述内容样式展示所述目标拖放元素。
根据一些实施例，所述装置包括：
获取模板容器模块，用于获取模板容器，在触发拖放结束事件的情况下，获取所述模板容器中的拖放元素。
根据一些实施例，所述装置还包括设置模块，所述设置模块配置为：
在触发拖放结束事件的情况下，获取目标拖放元素的位置信息；
响应用户的输入值，获取目标拖放元素的设置信息；
根据所述目标拖放元素的设置信息，设置目标拖放元素的样式和/或位置。
根据一些实施例，所述装置还包括重复拖放模块，所述重复拖放模块配置为：
捕捉模板容器内的拖放触发事件；
根据拖放触发的位置，获取目标拖放元素和目标拖放元素的内容样式；
删除所述模板容器中对应的拖放元素；
在拖放过程中根据所述内容样式展示目标拖放元素。
根据本申请的另一方面，提供一种电子设备，包括：
存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法中任一项所述的方法。
根据本申请的另一方面，提供一种计算机程序产品，包括计算机程序或指令，该计算机程序或指令被处理器执行时实现上述方法中任一项所述方法。
根据本申请示例实施例，通过自定义拖放过程中的元素样式，实现一个相对灵活的，可设置，可自定义的拖拽动画效果。通过微调元素在模板中的位置，实现精准拖放。
根据本申请示例实施例，可反复拖放同一元素，以实现调整修改，包括文字类的可设置字体，文字大小和文字颜色，图片类可微调设置图片大小。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本申请。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍。
图1示出根据本申请示例实施例的实现元素拖放的方法流程图。
图2示出根据本申请示例实施例的拖放元素示意图。
图3示出根据本申请示例实施例的元素拖放过程的效果图。
图4示出根据本申请示例实施例的元素位置示意图。
图5示出根据本申请示例实施例的元素样式设置示意图。
图6示出根据本申请另一示例实施例的元素样式设置示意图。
图7示出根据本申请示例实施例的实现元素重复拖放的方法流程图。
图8示出根据本申请示例实施例的重复拖放元素示意图。
图9示出根据本申请示例实施例的页面初始加载示意图。
图10示出根据本申请示例实施例的实现元素拖放的装置图。
图11示出根据一示例性实施例的一种电子设备的框图。
具体实施方式
现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本申请将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。
此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本申请的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本申请的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本申请的各方面。
附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
应理解，虽然本文中可能使用术语第一、第二、第三等来描述各种组件，但这些组件不应受这些术语限制。这些术语乃用以区分一组件与另一组件。因此，下文论述的第一组件可称为第二组件而不偏离本申请概念的教示。如本文中所使用，术语“及/或”包括相关联的列出项目中的任一个及一或多者的所有组合。
本领域技术人员可以理解，附图只是示例实施例的示意图，附图中的模块或流程并不一定是实施本申请所必须的，因此不能用于限制本申请的保护范围。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，拖放是标准的组成部分。在HTML5中用户可以使用鼠标选择一个可拖动元素，将元素拖动到一个可放置元素，并通过释放鼠标按钮放到这些元素。在拖动操作期间，可拖动元素的半透明表示跟随鼠标指针移动。
前端技术HTML5现有的拖动事件和效果有：利用draggable＝"true"设置元素可拖动；利用ondragstart和setData()设置被拖动数据的数据类型和值；利用ondragover事件规定在何处放置被拖动的数据；当放置被拖数据时，会发生drop事件。
现有的HTML5 Drag拖放存在的问题有：
拖放过程中的元素大小和拖放前的元素大小一致，不够灵活。
不能自定义拖放元素放置后在可放置元素内部的位置；不能返回放置后元素的位置。
本申请针对以上问题，提出一种实现元素拖放的方法，可以相对灵活，实现拖放元素样式可设置，以及可自定义拖放动画效果。例如：拖放过程中元素的大小，样式的自定义或者元素拖放结束后自定义元素的大小和位置。
本申请的技术方案可根据需求自定义拖放样式并且在指定区域内可重复拖放，可实现文字拖放和图片拖放。主要包括以下内容：
自定义拖放时元素的样式和文案，可修改元素的样式(现有鼠标拖放技术不能修改拖放过程中元素的样式)。
拖放结束后，点击对应元素，可以设置元素位置，字体大小和文字字体以及图片宽度。
在区域内的元素可以反复拖放，移动定位到拖放处(现有技术不能实现在区域中拖放定位)。
以下结合附图对本申请的示例实施例进行说明。
图1示出根据本申请示例实施例的实现元素拖放的方法流程图。
参见图1，在S101，获取可拖放的元素数据。
根据一些实施例，初始加载页面时，获取可拖放的元素数据，分成两种，一：用户可见的元素(如图2所示左边方框区域)；二：拖放过程中的样式(如图2所示右边方框区域，用户不可见)。
在S103，捕捉拖放触发事件，根据捕捉到的拖放触发事件，获取拖放触发时的位置。
以鼠标事件为例，实现鼠标拖放功能，包括鼠标按下(mousedown)、鼠标抬起(mouseup)、鼠标移动等事件(mousemove)。
以触屏事件为例，也可以实现手动拖拖放功能(可在屏幕上手动操作)，包括：手指触摸到一个DOM元素时触发touchstart；手指在一个DOM元素上滑动时触发touchmove；手指从一个DOM元素上移开时触发touchend。
DOM文档对象模型(DOM—Document Object Model)是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。DOM是以层次结构组织的节点或信息片断的集合，是给HTML与XML文件使用的一组API。
当用户在左边方框区域触发mousedown事件(按下鼠标)或触屏事件touchstart，可获取到按下位置的元素的索引。
在S105，根据位置获取拖放元素的样式。
当触发mousemove事件(鼠标移动时)或touchmove事件，用上述步骤得到的索引在用户不可见的列表中得到对应的拖放元素的样式，也就是要展示的内容。
在S107，在拖放过程中展示拖放元素的样式。
根据移动事件，实时获取移动位置，根据移动位置，设置拖放元素的位置。
根据一些实施例，在mousemove事件(鼠标移动时)或touchmove事件中，位置随着鼠标在移动，根据鼠标位置设置元素位置，设置元素位置可用top值和left值。这两个值是根据鼠标位置计算的相对于浏览器顶部和左边的位置，或者相对于模板的位置。鼠标位置变化，这两个值也在变化，看到的效果就是元素在跟着鼠标移动。
图3示出根据本申请示例实施例的元素拖放过程的效果图。
根据一些实施例，初始加载页面时，获取可拖放的元素数据，分成两种，一：用户可见的元素；二：拖放过程中的样式。
参见图3的(a),以鼠标事件为例，实现鼠标拖放功能，鼠标事件包括鼠标按下(mousedown)、鼠标抬起(mouseup)、鼠标移动等事件(mousemove)。
当用户在左边方框区域(如图2所示)触发mousedown事件(按下鼠标)，可获取到按下位置的元素的索引。
当触发mousemove事件(鼠标移动时)，用上述步骤得到的索引在用户不可见的列表中得到对应的拖放元素的样式，也就是要展示的内容样式，包括拖放元素的内容和大小，字体，颜色。图中拖放元素为“身份证号”，内容为“130822199004129009”，样式为图中所示的大小，字体和颜色。
根据移动事件，实时获取移动位置，根据移动位置，设置拖放元素的位置。
根据一些实施例，在mousemove事件(鼠标移动时)中，位置随着鼠标在移动，根据鼠标位置设置元素位置，设置元素位置可用top值和left值。这两个值是根据鼠标位置计算的相对于浏览器顶部和左边的位置，或者相对于模板的位置。鼠标位置变化，这两个值也在变化，看到的效果就是元素的内容样式在跟着鼠标移动。
参见图3的(b)，以触屏事件为例，也可以实现手动拖拖放功能(可在屏幕上手动操作)，包括：手指触摸到一个DOM元素时触发touchstart；手指在一个DOM元素上滑动时触发touchmove；手指从一个DOM元素上移开时触发touchend。
当用户在左边方框区域(如图2所示)触发触屏事件touchstart，可获取到按下位置的元素的索引。
当触发touchmove事件，用上述步骤得到的索引在用户不可见的列表中得到对应的拖放元素的样式，也就是要展示的内容样式。包括拖放元素的内容，如图中所示拖放元素为“证件照”，内容为证件照片的图片，样式为图中所示的大小。
根据移动事件，实时获取移动位置，根据移动位置，设置拖放元素的位置。
根据一些实施例，在touchmove事件中，位置随着触摸位置在移动，根据触屏位置设置元素位置，设置元素位置可用top值和left值。这两个值是根据触摸位置计算的相对于浏览器顶部和左边的位置，或者相对于模板的位置。触摸位置变化，这两个值也在变化，看到的效果就是元素的内容样式在跟着触摸点移动。
在S109，当触发拖放结束事件时，重新设置该元素的样式和位置。
根据一些实施例，拖放结束后可编辑拖放元素的样式，可包括文字字体，文字颜色，文字大小及图片大小等。
拖放到指定位置时，触发mouseup事件(鼠标抬起)或touchend事件，获取鼠标在页面中的位置A以及模板区域在页面中的位置B，相减后得到元素在模板中的位置C。如图4所示。
获取元素距离浏览器顶部和左边的偏移位置包括两种方式：
DOM元素对象.offsetTop和DOM元素对象.offsetLeft；
jquery元素对象.offset().top和jquery元素对象.offset().left。
DOM元素对象和jquery元素对象获取的值是一样的。这两种方法获取到的top和left都是相对于浏览器的位置。通过获取模板距离浏览器的位置和元素距离浏览器位置，可以计算出元素距离模板的top和left位置。
拖放结束后，用户可点击选中元素，出现输入框，输入的值分别对应X坐标-left和Y坐标-top，以及设置样式的输入框，比如字体，大小，颜色，可实现微调元素位置和样式。
图5示出根据本申请示例实施例的元素样式设置示意图。
根据一些实施例，拖放结束后可编辑拖放元素的样式，可包括文字字体，文字颜色，文字大小及图片大小等。
参见图5，以拖放元素为图片为例，拖放到指定位置时，触发mouseup事件(鼠标抬起)或touchend事件，获取鼠标在页面中的位置A以及模板区域在页面中的位置B，相减后得到元素在模板中的位置C。如图4所示。
获取元素距离浏览器顶部和左边的偏移位置包括两种方式：
DOM元素对象.offsetTop和DOM元素对象.offsetLeft；
jquery元素对象.offset().top和jquery元素对象.offset().left。
DOM元素对象和jquery元素对象获取的值是一样的。这两种方法获取到的top和left都是相对于浏览器的位置。通过获取模板距离浏览器的位置和元素距离浏览器位置，可以计算出元素距离模板的top和left位置。
拖放结束后，用户可点击选中元素，如图中所示图片，出现输入框，输入的值分别对应X坐标-left和Y坐标-top，可实现微调图片元素的位置和大小(宽度)。
图6示出根据本申请另一示例实施例的元素样式设置示意图。
参见图6，以拖放元素为文字为例，拖放到指定位置时，触发mouseup事件(鼠标抬起)或touchend事件，获取鼠标在页面中的位置A以及模板区域在页面中的位置B，相减后得到元素在模板中的位置C。如图4所示。
通过获取模板距离浏览器的位置和元素距离浏览器位置，可以计算出元素距离模板的top和left位置。
拖放结束后，用户可点击选中元素，如图中所示文字“王佳佳”，出现输入框，输入的值分别对应X坐标-left和Y坐标-top，以及设置样式的输入框，比如字体，大小，颜色，可实现微调元素位置和样式。
图7示出根据本申请示例实施例的实现元素重复拖放的方法流程图。
参见图7，在S701，捕捉模板容器内的拖放触发事件，根据拖放触发的位置，获取第一索引、第二索引和第三索引。
鼠标在模板内的元素时按下时，获取到两个索引，索引一(代表元素对应的第一组数据中的索引)和索引三(代表该元素在第三组数据中的索引)。
在S703，根据第一索引，在所述第一组数据列表中得到拖放元素；根据第二索引，在所述第二组数据列表中得到拖放元素的样式；根据第三索引，删除在所述第三组数据列表中的拖放元素。
鼠标在模板内的元素时按下时，利用索引一删除模板中该元素(就是删除第三组数据列表中对应的该数据)，并且拿到对应的渲染索引(索引二)，用索引二获取到在第二组数据列表中对应的元素内容。
在S705，在拖放过程中展示拖放元素的样式。
拖放过程中的实现和步骤S107类似，在此不再赘述。
在S707，当触发拖放结束事件时，重新设置该元素的样式和位置。
设置元素位置跟着鼠标移动位置走，抬起鼠标，重新设置该元素的样式和位置和步骤S109类似，在此不再赘述。
图8示出根据本申请示例实施例的重复拖放元素示意图。
根据一些实施例，可反复拖放已定位的元素。下面以实现方法为共有三组数据列表的数据形式为例说明。
共有三组数据：
第一组数据列表：图2中左边方框区域用户可见的按钮(数组格式)。
第二组数据列表：图2中右边方框区域，用户拖放过程中的数据展示。和左边方框区域索引一一对应(数组格式)。
第三组数据列表：用于模板内展示的数据列表(数组格式)。
根据一些实施例，图2中左边方框区域和右边方框区域以及模板区域的数据可以使用一样的数据结构。
对应于模板区域的数据，数组中对象的内容是一样的，只是在数组中的顺序和个数，由拖放的元素的顺序和数量决定。
实现方法包括：鼠标在模板内的元素时按下时，获取到两个索引，索引三(代表该元素在第三组数据中的索引)，索引一(代表元素对应的第一组数据中的索引)，利用索引三删除模板中该元素(就是删除第三组数据列表中对应的该数据)，并且拿到对应的渲染索引(索引二)，用索引二获取到在第二组数据列表中对应的元素内容，拖放过程中的实现和步骤S107类似，设置元素位置跟着鼠标移动位置走，抬起鼠标拖放元素功能和步骤S109类似。
图9示出根据本申请示例实施例的页面初始加载示意图。
根据一些实施例，在页面初始加载时，需要准备好元素数据，可包括如下步骤：
加载页面；
获取数据；
获取数据包括：
生成用户可见元素队列A，对应于图2中左边方框区域的元素。
生成用户不可见元素队列B，对应于图2中右边方框区域的元素。
获取模板左上角在浏览器上的位置top2和left2，该值在浏览器加载后用于捕获位置的变化。
根据一些实施例，拖放过程包括以下几种情况：
情况一：左侧，用户按下鼠标，获取对应索引index和鼠标位置，确认拖放的元素及位置，移动过程中改变元素位置实现拖放效果，鼠标抬起，获取鼠标位置，如果鼠标位置不在模板范围内，结束代码操作，不做处理(无效的拖放)。
情况二：左侧，用户按下鼠标，获取对应索引index和鼠标位置，确认拖放的元素及位置，移动过程中改变元素位置实现拖放效果，鼠标抬起，获取鼠标位置，鼠标位置在模板范围内，利用已获取到的模板位置，计算出元素应在模板中的位置，追加一个对象到模板队列中，渲染元素到模板中。
情况三：模板内，用户按下鼠标，用户想要进行拖放操作，获取对应索引index和鼠标位置，删除模板列表中对应的数据，确认拖放的元素及位置，移动过程中改变元素位置实现拖放效果，鼠标抬起，获取鼠标位置，鼠标位置不在模板范围内，结束代码操作，不做处理(无效的拖放)。
情况四：模板内，用户按下鼠标，用户想要进行拖放操作，获取对应索引index和鼠标位置，删除模板列表中对应的数据，确认拖放的元素及位置，移动过程中改变元素位置实现拖放效果，鼠标抬起，获取鼠标位置，鼠标位置在模板范围内，利用已获取到的模板位置，计算出元素应在模板中的位置，追加一个对象到模板队列中，渲染元素到模板中。
情况五：模板内，用户按下鼠标，用户选中元素，此时可修改元素的样式(图片的大小，文字字体，文字大小和颜色，及修改元素在模板中的位置)，鼠标点击空白区域，退出编辑模式。
应清楚地理解，本申请描述了如何形成和使用特定示例，但本申请不限于这些示例的任何细节。相反，基于本申请公开的内容的教导，这些原理能够应用于许多其它实施例。
本领域技术人员可以理解实现上述实施例的全部或部分步骤被实现为由CPU执行的计算机程序。在该计算机程序被CPU执行时，执行本申请提供的上述方法所限定的上述功能的程序可以存储于一种计算机可读存储介质中，该存储介质可以是只读存储器，磁盘或光盘等。
此外，需要注意的是，上述附图仅是根据本申请示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。
通过对示例实施例的描述，本领域技术人员易于理解，根据本申请实施例的实现元素拖放方法至少具有以下优点中的一个或多个。
根据示例实施例，通过自定义拖放过程中的元素样式，微调元素在模板中的位置实现精准拖放。
根据示例实施例，可反复拖放同一元素，以实现调整修改，包括文字类的可设置字体，文字大小和文字颜色，图片类可微调设置图片宽度。可以应用到所有需要拖动过程中自定义图片或者文字的程序中。
下面描述本申请的装置实施例，其可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，可参照本申请方法实施例。
图10示出根据本申请示例实施例的实现元素拖放的装置图。图10所示装置可以执行前述根据本申请实施例的实现元素拖放的方法。
如图10所示，实现元素拖放的装置可包括：获取模块1010、捕捉模块1020、样式获取模块1030、展示模块1040、获取模板容器模块1050、设置模块1060、重复拖放模块1070。
参见图10并参照前面的描述，获取模块1010，用于获取可拖放的元素数据。
捕捉模块1020，用于捕捉拖放触发事件。
样式获取模块1030，用于根据拖放触发事件，获取拖放元素的内容样式。
展示模块1040，用于在拖放过程中展示拖放元素的内容样式。
获取模板容器模块1050，用于获取模板容器。
设置模块1060，所述设置模块配置为：
当触发拖放结束事件时，获取拖放元素的定位位置；
通过用户输入框，获取拖放元素的样式和/或位置的定制信息；
根据用户输入的定制信息，设置拖放元素的样式和位置。
重复拖放模块1070，所述重复拖放模块配置为：
捕捉模板容器内的拖放触发事件；
根据拖放触发的位置，获取拖放元素和拖放元素的内容样式；
删除所述模板容器中对应的拖放元素；
在拖放过程中展示拖放元素的内容样式。
装置执行与前面提供的方法类似的功能，其他功能可参见前面的描述，此处不再赘述。
图11示出根据一示例性实施例的一种电子设备的框图。
下面参照图11来描述根据本申请的这种实施方式的电子设备200。图11显示的电子设备200仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。
如图11所示，电子设备200以通用计算设备的形式表现。电子设备200的组件可以包括但不限于：至少一个处理单元210、至少一个存储单元220、连接不同系统组件(包括存储单元220和处理单元210)的总线230、显示单元240等。
其中，存储单元存储有程序代码，程序代码可以被处理单元210执行，使得处理单元210执行本说明书描述的根据本申请各种示例性实施方式的方法。
存储单元220可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)2201和/或高速缓存存储单元2202，还可以进一步包括只读存储单元(ROM)2203。
存储单元220还可以包括具有一组(至少一个)程序模块2205的程序/实用工具2204，这样的程序模块2205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线230可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备200也可以与一个或多个外部设备300(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备200交互的设备通信，和/或与使得该电子设备200能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口250进行。并且，电子设备200还可以通过网络适配器260与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器260可以通过总线230与电子设备200的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备200使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。根据本申请实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本申请实施方式的上述方法。
软件产品可以采用一个或多个可读介质的任意组合。可读介质可以可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本申请操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
本领域技术人员可以理解上述各模块可以按照实施例的描述分布于装置中，也可以进行相应变化唯一不同于本实施例的一个或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成多个子模块。
以上具体地示出和描述了本申请的示例性实施例。应可理解的是，本申请不限于这里描述的详细结构、设置方式或实现方法；相反，本申请意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。

Claims (12)

1.一种实现元素拖放的方法，其特征在于，包括：
捕获拖放触发事件；
响应于所述拖放触发事件，确定目标拖放元素，以及所述目标拖放元素的内容样式；
在拖放过程中根据所述内容样式展示所述目标拖放元素。
2.根据权利要求1所述的方法，其特征在于，还包括：
在触发拖放结束事件的情况下，获取目标拖放元素的位置信息；
响应用户的输入值，获取目标拖放元素的设置信息；
根据所述目标拖放元素的设置信息，设置目标拖放元素的样式和/或位置。
3.根据权利要求1所述的方法，其特征在于，还包括：
获取模板容器，用于容置拖放元素；
在触发拖放结束事件的情况下，获取所述模板容器中的拖放元素。
4.根据权利要求3所述的方法，其特征在于，还包括：
捕捉模板容器内的拖放触发事件；
根据拖放触发的位置，获取目标拖放元素和目标拖放元素的内容样式；
删除所述模板容器中对应的拖放元素；
在拖放过程中根据所述内容样式展示目标拖放元素。
5.根据权利要求4所述的方法，其特征在于，还包括：
在触发拖放结束事件的情况下，获取目标拖放元素的位置信息；
响应用户的输入值，获取目标拖放元素的设置信息；
根据所述目标拖放元素的设置信息，设置目标拖放元素的样式和/或位置。
6.根据权利要求1所述的方法，其特征在于，所述确定目标拖放元素，以及所述目标拖放元素的内容样式包括：
获取用户界面的第一元素数据；
根据所述第一元素数据，得到对应的数据值，以确定所述目标拖放元素的内容。
7.一种实现元素拖放的装置，其特征在于，包括：
获取模块，用于获取可拖放的元素数据；
捕捉模块，用于捕捉拖放触发事件；
样式获取模块，用于响应于所述拖放触发事件，确定目标拖放元素，以及所述目标拖放元素的内容样式；
展示模块，用于在拖放过程中根据所述内容样式展示所述目标拖放元素。
8.根据权利要求7所述的装置，其特征在于，还包括：
获取模板容器模块，用于获取模板容器，在触发拖放结束事件的情况下，获取所述模板容器中的拖放元素。
9.根据权利要求7所述的装置，其特征在于，还包括设置模块，所述设置模块配置为：
在触发拖放结束事件的情况下，获取目标拖放元素的位置信息；
响应用户的输入值，获取目标拖放元素的设置信息；
根据所述目标拖放元素的设置信息，设置目标拖放元素的样式和/或位置。
10.根据权利要求7所述的装置，其特征在于，还包括重复拖放模块，所述重复拖放模块配置为：
捕捉模板容器内的拖放触发事件；
根据拖放触发的位置，获取目标拖放元素和目标拖放元素的内容样式；
删除所述模板容器中对应的拖放元素；
在拖放过程中根据所述内容样式展示目标拖放元素。
11.一种电子设备，其特征在于，包括：
存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1-6中任一项所述的方法。
12.一种计算机程序产品，包括计算机程序或指令，其特征在于，该计算机程序或指令被处理器执行时实现如权利要求1-6中任一项所述方法。
CN202111550791.1A 2021-12-17 2021-12-17 一种实现元素拖放的方法、装置及电子设备 Pending CN114237599A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111550791.1A CN114237599A (zh) 2021-12-17 2021-12-17 一种实现元素拖放的方法、装置及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111550791.1A CN114237599A (zh) 2021-12-17 2021-12-17 一种实现元素拖放的方法、装置及电子设备

Publications (1)

Publication Number Publication Date
CN114237599A true CN114237599A (zh) 2022-03-25

Family

ID=80757683

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111550791.1A Pending CN114237599A (zh) 2021-12-17 2021-12-17 一种实现元素拖放的方法、装置及电子设备

Country Status (1)

Country Link
CN (1) CN114237599A (zh)

Similar Documents

Publication Publication Date Title
EP2359231B1 (en) Data visualization interactivity architecture
US6907580B2 (en) Selection paradigm for displayed user interface
US9043696B1 (en) Systems and methods for visual definition of data associations
US9910835B2 (en) User interface for creation of content works
CN105867820A (zh) 用于触摸屏的文本编辑方法和装置
CN114357345A (zh) 图片处理方法、装置、电子设备及计算机可读存储介质
CN110471609B (zh) 文本信息编辑方法、装置、计算机设备和存储介质
CA2983248C (en) Rendering graphical assets natively on multiple screens of electronic devices
CN112631474B (zh) 页面中元素移动方法和装置、介质、设备
Dixon et al. Pixel-based methods for widget state and style in a runtime implementation of sliding widgets
Eng Qt5 C++ GUI Programming Cookbook: Practical recipes for building cross-platform GUI applications, widgets, and animations with Qt 5
CN112487340A (zh) 一种极速简约防盗Linux全屏浏览器的创新技术
CN114237599A (zh) 一种实现元素拖放的方法、装置及电子设备
KR101730070B1 (ko) ＳａａＳ 환경에서의 웹페이지 서비스 방법, 이를 위한 컴퓨터 프로그램, 그 기록매체
Khan et al. A retargetable model-driven framework for the development of mobile user interfaces
US20220147693A1 (en) Systems and Methods for Generating Documents from Video Content
CN110908550B (zh) 光标悬停状态下的操作处理方法和装置
JP7216317B1 (ja) 情報処理装置及びその制御方法、プログラム
RU2752777C1 (ru) Способ компьютерного увеличения и центрирования объектов в веб-браузере
Godfrey Putting it all together—A blind person’s perspective on developing a toolbox for document preparation
CN117873457A (zh) 物模型控制卡片的生成方法、装置、设备和存储介质
CN115543288A (zh) 代码信息的生成方法、装置、设备及存储介质
Powers Dreamweaver and PHP—A Productive Partnership
Freeman Using Pointers & Gestures

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination