页面元素的拖放方法及装置制造方法及图纸

本发明专利技术公开了一种页面元素的拖放方法及装置，涉及信息技术领域，解决了页面元素的二次拖放准确率低的问题。本发明专利技术的主要技术方案为：当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。本发明专利技术主要用于拖放页面元素。

Drag and drop method and device for page element

The invention discloses a drag and drop method and a device for page elements, which relates to the field of information technology, and solves the problem of low accuracy of drag and drop of the two elements of the page element. The main technical scheme of the invention is: when receiving the page element drag and drop command, through the preset function copy page elements to drag and drop, the page elements in the instruction with the drag and drop by drop elements on the page, the page elements of the copying and the relationship between page elements will drop; the copy of the page element is configured to allow the page element drag; copies are allowed to be added to the page elements to drag a drag and drop interface. The invention is mainly used for drag and drop page elements.

【技术实现步骤摘要】

本专利技术涉及信息
，尤其涉及一种页面元素的拖放方法及装置。
技术介绍
jQueryUI是以jQuery为基础的开源JavaScript网页用户界面代码库，包含底层用户交互、动画、特效和可更换主题的可视控件，通过jQueryUI可以直接构建具有很好交互性的web应用程序，jQueryUI主要分为3个部分，分别为交互部分、微件部分和效果库部分。其中，交互部分是一些与鼠标交互相关的内容，通过交互部分中的draggable函数(使选中的元素可以通过鼠标拖动)和droppable函数(允许鼠标拖动的元素拖放到某对象中)两个交互动作，可以实现页面元素拖放功能。目前，jQueryUI提供的交互部分中的拖放功能只是针对页面中原有页面元素的拖放，如果对已拖放的页面元素再次拖放，此时拖放的并不是已经拖放的页面元素，拖放元素的还是原有被拖放的页面元素，因此现有的页面元素的拖放准确率低。
技术实现思路
鉴于上述问题，提出了本专利技术，以便提供一种克服上述问题或者至少部分地解决上述问题的页面元素的拖放方法及装置。为达到上述目的，本专利技术主要提供如下技术方案：一方面，本专利技术实施例提供了一种页面元素的拖放方法，该方法包括：当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。另一方面，本专利技术实施例还提供了一种页面元素的拖放装置，该装置包括：复制单元，用于当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；配置单元，用于将所述复制的页面元素配置成允许被拖动的页面元素；添加单元，用于将复制的允许被拖动的页面元素添加到可拖放的界面中。借由上述技术方案，本专利技术实施例提供的技术方案至少具有下列优点：本专利技术实施例提供的一种页面元素的拖放方法及装置，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。与目前通过jQueryUI中提供的拖放功能只能对原有的页面元素进行拖放相比，本专利技术实施例当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中。由于本专利技术中添加到可拖放界面中的页面元素是对被拖放页面元素的复制，且复制后的页面元素和被拖放的页面元素之间无关联，因此对可拖放界面中的页面元素进行二次拖放时，并不会影响原有被拖放的页面元素，从而提高了页面元素二次拖放的准确率。附图说明通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：图1为本专利技术实施例提供的一种页面元素的拖放方法流程图；图2为本专利技术实施例提供的另一种页面元素的拖放方法流程图；图3为本专利技术实施例提供的一种页面元素的拖放装置的组成框图；图4为本专利技术实施例提供的另一种页面元素的拖放装置的组成框图。具体实施方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。为使本专利技术技术方案的优点更加清楚，下面结合附图和实施例对本专利技术作详细说明。本专利技术实施例提供了一种页面元素的拖放方法，如图1所示，所述方法包括：S101、当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素。其中，所述复制的页面元素和所述被拖放的页面元素之间无关联，复制的页面元素和所述被拖放的页面元素之间无关联是指复制的页面元素和所述被拖放的页面元素没有从属关系，复制的页面元素和原有被拖放的页面元素之间是相互独立的个体，对复制的页面进行操作并不会影响被拖放的页面元素。所述页面元素具体可以为显示页面中的文字、图片、音频、动画、视频、命令按钮等元素，本专利技术实施例不做具体限定。在本专利技术实施例中，当用户对显示页面中的某个页面元素进行拖拽时，系统则会接收到页面元素拖放指令，且接收到的页面元素拖放指令当中携带有被拖放的页面元素，然后根据预置功能函数复制所述被拖放的页面元素。其中，预置功能函数用于实现复制被拖放的页面元素，所述预置功能函数具体可以通过将jQueryUI中的draggable函数对应的help配置参数设置为clone，然后在droppable函数中调用ui.draggable.clone方法，实现复制被拖放的页面元素。S102、将所述复制的页面元素配置成允许被拖动的页面元素。其中，允许被拖动的页面元素是指可以通过鼠标拖拽移动的元素。在本专利技术实施例中，可以通过jQueryUI中的draggable函数将被复制的页面元素配置成允许被拖动的页面元素。S103、将复制的允许被拖动的页面元素添加到可拖放的界面中。其中，所述可拖放的界面为可添加或插入页面元素的界面，所述可拖放的界面具体可以为元素编辑界面。在本专利技术实施例中，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中，从而实现了页面元素的拖放。在本专利技术中，由于拖放的页面元素是被拖放页面元素的复制，且拖放到页面元素和被拖放的页面元素之间无关联，因此对已拖放的元素再次进行拖放操作时并不会影响被原有的被拖放的页面元素，从而提高了页面元素二次拖放的准确性。本专利技术实施例提供的一种页面元素的拖放方法，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。与目前通过jQueryUI中提供的拖放功能只能对原有的页面元素进行拖放相比，本专利技术实施例当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中。由于本专利技术中添加到可拖放界面中的页面元素是对被拖放页面元素的复制，且复制后的页面元素和被拖放的页面元素之间无关联，因此对可拖放界面中的页面元素进行二次拖放时，并不会影响原有被拖放的页面元素，从而提高了页面元素二次拖放的准确率。本专利技术实施例提供了另一种页面元素的拖放方法，如图2所示，所述方法包括：S201、通过jQueryUI的draggable函数，将所述页面元素本文档来自技高网...

【技术保护点】
一种页面元素的拖放方法，其特征在于，包括：当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。

【技术特征摘要】
1.一种页面元素的拖放方法，其特征在于，包括：当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。2.根据权利要求1所述的页面元素的拖放方法，其特征在于，所述通过预置功能函数复制被拖放的页面元素之前，所述方法还包括：通过jQueryUI的draggable函数，将所述页面元素中的help参数设置为clone，所述clone参数用于表示拖放的页面元素是所述被拖放的页面元素的复制。3.根据权利要求2所述的页面元素的拖放方法，其特征在于，所述通过预置功能函数复制被拖放的页面元素包括：获取jQueryUI中的event参数和ui参数；根据所述event参数和所述ui参数，调用ui.draggable.clone函数复制所述被拖放的页面元素。4.根据权利要求3所述的页面元素的拖放方法，其特征在于，所述将所述复制后的页面元素配置成允许被拖动的页面元素包括：根据所述draggable功能函数，将所述复制后的页面元素配置成允许被拖动的页面元素。5.根据权利要求4所述的页面元素的拖放方法，其特征在于，所述将复制的允许被拖动的页面元素添加到可拖放的界面中包括：根据droppable功能函数，将复制的允许被拖动的页面元素添加...

【专利技术属性】
技术研发人员：张昭，
申请(专利权)人：北京国双科技有限公司，
类型：发明
国别省市：北京;11