页面元素的拖放方法及装置与流程

本发明涉及信息技术领域，尤其涉及一种页面元素的拖放方法及装置。

背景技术：

jQuery UI是以jQuery为基础的开源JavaScript网页用户界面代码库，包含底层用户交互、动画、特效和可更换主题的可视控件，通过jQuery UI可以直接构建具有很好交互性的web应用程序，jQuery UI主要分为3个部分，分别为交互部分、微件部分和效果库部分。其中，交互部分是一些与鼠标交互相关的内容，通过交互部分中的draggable函数(使选中的元素可以通过鼠标拖动)和droppable函数(允许鼠标拖动的元素拖放到某对象中)两个交互动作，可以实现页面元素拖放功能。

目前，jQuery UI提供的交互部分中的拖放功能只是针对页面中原有页面元素的拖放，如果对已拖放的页面元素再次拖放，此时拖放的并不是已经拖放的页面元素，拖放元素的还是原有被拖放的页面元素，因此现有的页面元素的拖放准确率低。

技术实现要素：

鉴于上述问题，提出了本发明，以便提供一种克服上述问题或者至少部分地解决上述问题的页面元素的拖放方法及装置。

为达到上述目的，本发明主要提供如下技术方案：

一方面，本发明实施例提供了一种页面元素的拖放方法，该方法包括：

当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；

将所述复制的页面元素配置成允许被拖动的页面元素；

将复制的允许被拖动的页面元素添加到可拖放的界面中。

另一方面，本发明实施例还提供了一种页面元素的拖放装置，该装置包括：

复制单元，用于当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；

配置单元，用于将所述复制的页面元素配置成允许被拖动的页面元素；

添加单元，用于将复制的允许被拖动的页面元素添加到可拖放的界面中。

借由上述技术方案，本发明实施例提供的技术方案至少具有下列优点：

本发明实施例提供的一种页面元素的拖放方法及装置，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。与目前通过jQuery UI中提供的拖放功能只能对原有的页面元素进行拖放相比，本发明实施例当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中。由于本发明中添加到可拖放界面中的页面元素是对被拖放页面元素的复制，且复制后的页面元素和被拖放的页面元素之间无关联，因此对可拖放界面中的页面元素进行二次拖放时，并不会影响原有被拖放的页面元素，从而提高了页面元素二次拖放的准确率。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1为本发明实施例提供的一种页面元素的拖放方法流程图；

图2为本发明实施例提供的另一种页面元素的拖放方法流程图；

图3为本发明实施例提供的一种页面元素的拖放装置的组成框图；

图4为本发明实施例提供的另一种页面元素的拖放装置的组成框图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

为使本发明技术方案的优点更加清楚，下面结合附图和实施例对本发明作详细说明。

本发明实施例提供了一种页面元素的拖放方法，如图1所示，所述方法包括：

S101、当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素。

其中，所述复制的页面元素和所述被拖放的页面元素之间无关联，复制的页面元素和所述被拖放的页面元素之间无关联是指复制的页面元素和所述被拖放的页面元素没有从属关系，复制的页面元素和原有被拖放的页面元素之间是相互独立的个体，对复制的页面进行操作并不会影响被拖放的页面元素。所述页面元素具体可以为显示页面中的文字、图片、音频、动画、视频、命令按钮等元素，本发明实施例不做具体限定。

在本发明实施例中，当用户对显示页面中的某个页面元素进行拖拽时，系统则会接收到页面元素拖放指令，且接收到的页面元素拖放指令当中携带有被拖放的页面元素，然后根据预置功能函数复制所述被拖放的页面元素。其中，预置功能函数用于实现复制被拖放的页面元素，所述预置功能函数具体可以通过将jQuery UI中的draggable函数对应的help配置参数设置为clone，然后在droppable函数中调用ui.draggable.clone方法，实现复制被拖放的页面元素。

S102、将所述复制的页面元素配置成允许被拖动的页面元素。

其中，允许被拖动的页面元素是指可以通过鼠标拖拽移动的元素。在本发明实施例中，可以通过jQuery UI中的draggable函数将被复制的页面元素配置成允许被拖动的页面元素。

S103、将复制的允许被拖动的页面元素添加到可拖放的界面中。

其中，所述可拖放的界面为可添加或插入页面元素的界面，所述可拖放的界面具体可以为元素编辑界面。在本发明实施例中，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中，从而实现了页面元素的拖放。在本发明中，由于拖放的页面元素是被拖放页面元素的复制，且拖放到页面元素和被拖放的页面元素之间无关联，因此对已拖放的元素再次进行拖放操作时并不会影响被原有的被拖放的页面元素，从而提高了页面元素二次拖放的准确性。

本发明实施例提供的一种页面元素的拖放方法，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。与目前通过jQuery UI中提供的拖放功能只能对原有的页面元素进行拖放相比，本发明实施例当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中。由于本发明中添加到可拖放界面中的页面元素是对被拖放页面元素的复制，且复制后的页面元素和被拖放的页面元素之间无关联，因此对可拖放界面中的页面元素进行二次拖放时，并不会影响原有被拖放的页面元素，从而提高了页面元素二次拖放的准确率。

本发明实施例提供了另一种页面元素的拖放方法，如图2所示，所述方法包括：

S201、通过jQuery UI的draggable函数，将所述页面元素中的help参数设置为clone。

其中，所述draggable函数用来使选中的元素可以通过鼠标拖动，所述clone参数用于表示拖放的页面元素是被拖放的页面元素的复制。

S202、当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素。

其中，所述复制的页面元素和所述被拖放的页面元素之间无关联，复制的页面元素和所述被拖放的页面元素之间无关联是指复制的页面元素和所述被拖放的页面元素没有从属关系，复制的页面元素和原有被拖放的页面元素之间是相互独立的个体，对复制的页面进行操作并不会影响被拖放的页面元素。所述页面元素具体可以为显示页面中的文字、图片、音频、动画、视频、命令按钮等元素，本发明实施例不做具体限定。

在本发明实施例中，当用户对显示页面中的某个页面元素进行拖拽时，会接收到页面元素拖放指令，且接收到的页面元素拖放指令当中携带有被拖放的页面元素，然后根据预置功能函数复制所述被拖放的页面元素。其中，预置功能函数用于实现复制被拖放的页面元素。

对于本发明实施例，所述通过预置功能函数复制被拖放的页面元素包括：获取jQuery UI中的event参数和ui参数；根据所述event参数和所述ui参数，调用ui.draggable.clone函数复制所述被拖放的页面元素。其中，event参数代表事件的状态，如触发event对象的元素、鼠标的位置及状态、按下键等等，event对象只在事件发生的过程中才有效，所述ui参数表示页面元素。在本发明实施例中，复制被拖放的页面元素具体可以通过将jQuery UI中的draggable函数对应的help配置参数设置为clone，当接收到页面元素拖放指令时，首先获取被拖放的页面元素的event参数和ui参数，然后在droppable函数中调用ui.draggable.clone方法实现复制被拖放的页面元素。

S203、将所述复制的页面元素配置成允许被拖动的页面元素。

其中，允许被拖动的页面元素是指可以通过鼠标拖拽移动的元素。在本发明实施例中，对于本发明实施例，所述将所述复制后的页面元素配置成允许被拖动的页面元素包括：根据所述draggable功能函数，将所述复制 后的页面元素配置成允许被拖动的页面元素。

S204、将复制的允许被拖动的页面元素添加到可拖放的界面中。

其中，所述可拖放的界面为可添加或插入页面元素的界面，所述可拖放的界面具体可以为元素编辑界面。在本发明实施例中，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中，从而实现了页面元素的拖放。在本发明中，由于拖放的页面元素是被拖放页面元素的复制，且拖放到页面元素和被拖放的页面元素之间无关联，因此对已拖放的元素再次进行拖放操作时并不会影响被原有的被拖放的页面元素，从而提高了页面元素二次拖放的准确性。

对于本发明实施例，所述将复制的允许被拖动的页面元素添加到可拖放的界面中包括：根据droppable功能函数，将复制的允许被拖动的页面元素添加到可拖放的界面中。在本发明实施例中，当用户通过长按鼠标按键拖拽页面元素移动到指定的位置后，松开鼠标按键则会触发droppable功能函数，在droppable功能函数中首先获取event参数和ui参数，然后根据所述event参数和所述ui参数，调用ui.draggable.clone函数实现复制所述被拖放的页面元素，再将复制的页面元素配置成允许被拖动的页面元素，最后将复制的允许被拖动的页面元素添加到可拖放的界面中，从而实现了页面元素的拖放。

对于本发明实施例，所述方法还包括：将所述draggable功能函数和droppable功能函数配置参数中的scope参数设置成相同的值。其中，所述scope参数表示页面元素可拖放的范围。在本发明实施例中，将所述draggable功能函数和droppable功能函数配置参数中的scope参数设置成相同的值，可以实现指定页面元素移动和放置的范围，例如在draggable功能函数将页面元素A设置的拖动范围为界面A，在droppable功能函数中将页面元素A设置的放置范围为界面A，则对页面元素A进行拖放时，页面元素A仅可以在界面A当中进行移动和放置。

对于本发明实施例，可以应用的场景如下所示，但不仅限于此，包括： 接收页面元素A的拖放指令，其中页面元素A是可被复制的页面元素，页面元素A配置的可以移动范围为显示界面B，然后通过预置功能函数复制页面元素A，再对复制的页面元素A配置成允许被拖动的页面元素，最后将复制的允许被拖动的页面元素A添加到显示界面B当中，从而实现了对页面元素A的拖放操作。在本发明中，由于拖放的页面元素是被拖放页面元素的复制，且拖放到页面元素和被拖放的页面元素之间无关联，因此对已拖放的元素再次进行拖放操作时并不会影响被原有的被拖放的页面元素，从而提高了页面元素二次拖放的准确性。

本发明实施例提供的另一种页面元素的拖放方法，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。与目前通过jQuery UI中提供的拖放功能只能对原有的页面元素进行拖放相比，本发明实施例当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中。由于本发明中添加到可拖放界面中的页面元素是对被拖放页面元素的复制，且复制后的页面元素和被拖放的页面元素之间无关联，因此对可拖放界面中的页面元素进行二次拖放时，并不会影响原有被拖放的页面元素，从而提高了页面元素二次拖放的准确率。

进一步地，本发明实施例提供一种页面元素的拖放装置，如图3所示，所述装置包括：复制单元31、配置单元32、添加单元33。

复制单元31，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联。

配置单元32，用于将所述复制的页面元素配置成允许被拖动的页面元素。

添加单元33，用于将复制的允许被拖动的页面元素添加到可拖放的界 面中。

需要说明的是，本发明实施例提供的一种页面元素的拖放装置所涉及各功能单元的其他相应描述，可以参考图1所示方法的对应描述，在此不再赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。

本发明实施例提供的一种页面元素的拖放装置，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。与目前通过jQuery UI中提供的拖放功能只能对原有的页面元素进行拖放相比，本发明实施例当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中。由于本发明中添加到可拖放界面中的页面元素是对被拖放页面元素的复制，且复制后的页面元素和被拖放的页面元素之间无关联，因此对可拖放界面中的页面元素进行二次拖放时，并不会影响原有被拖放的页面元素，从而提高了页面元素二次拖放的准确率。

进一步地，本发明实施例提供另一种页面元素的拖放装置，如图4所示，所述装置包括：复制单元41、配置单元42、添加单元43。

复制单元41，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联。

配置单元42，用于将所述复制的页面元素配置成允许被拖动的页面元素。

添加单元43，用于将复制的允许被拖动的页面元素添加到可拖放的界面中。

进一步地，所述装置还包括：

设置单元44，用于通过jQuery UI的draggable函数，将所述页面元素 的中的help参数设置为clone，所述clone参数用于表示拖放的页面元素是被拖放的页面元素的复制。

所述复制单元41包括：

获取模块411，用于获取jQuery UI中的event参数和ui参数。

复制模块412，用于根据所述event参数和所述ui参数，调用ui.draggable.clone函数复制所述被拖放的页面元素。

所述配置单元42，具体用于根据所述draggable功能函数，将所述复制后的页面元素配置成允许被拖动的页面元素。

所述添加单元43，具体用于根据droppable功能函数，将复制的允许被拖动的页面元素添加到可拖放的界面中。

所述设置单元，还用于将所述draggable功能函数和droppable功能函数配置参数中的scope参数设置成相同的值。

需要说明的是，本发明实施例提供的另一种页面元素的拖放装置所涉及各功能单元的其他相应描述，可以参考图2所示方法的对应描述，在此不再赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。

本发明实施例提供的另一种页面元素的拖放装置，当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述页面元素拖放指令中携带有所述被拖放的页面元素，所述复制的页面元素和所述被拖放的页面元素之间无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。与目前通过jQuery UI中提供的拖放功能只能对原有的页面元素进行拖放相比，本发明实施例当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，然后将复制的页面元素配置成允许被拖动的页面元素，最后将复制到允许被拖动的页面元素添加到可拖放的界面中。由于本发明中添加到可拖放界面中的页面元素是对被拖放页面元素的复制，且复制后的页面元素和被拖放的页面元素之间无关联，因此对可拖放界面中的页面元素进行二次拖放时，并不会影响原有被拖放的页面元素，从而提高了页面元素二次拖放的准确率。

所述页面元素的拖放装置包括处理器和存储器，上述复制单元、配置单元、添加单元、设置单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提高页面元素拖放的准确率。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：当接收到页面元素拖放指令时，通过预置功能函数复制被拖放的页面元素，所述复制的页面元素和原有被拖放的页面元素无关联；将所述复制的页面元素配置成允许被拖动的页面元素；将复制的允许被拖动的页面元素添加到可拖放的界面中。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存 储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。