页面元素拖放方法、装置、电子设备及存储介质与流程

1.本发明涉及信息技术领域，具体而言，涉及一种页面元素拖放方法、装置、电子设备及存储介质。


背景技术：

2.随着各类网页制作技术的发展，用户可以根据自己的需求进行网页制作，网页已不再仅用于信息展示，如今的网页制作更加注重网页和用户的交互。例如，在制作一个图片分类的网页时，常常需要移动图片的位置，相比于复制粘贴的方式，使用拖放的方式来改变图片的位置往往更加直观。此外，对于显示在网页上的其他页面元素如标题、动画、命令按钮等也常常用到拖放操作。
3.在拖放过程中，如果能自定义拖放时的背景，将极大地提高用户的视觉体验。但是，在使用不同的浏览器对网页中的页面元素进行拖放时，能够支持的附加功能往往不同，一些浏览器支持自定义拖放时的背景，而一部分浏览器则不支持自定义拖放时的背景，这造成了同一网页在不同浏览器中出现了较大的视觉差异。


技术实现要素：

4.本发明的目的包括，例如，提供了一种页面元素拖放方法、装置、电子设备及存储介质，该方法应用于各种浏览器，在对浏览器中的网页的页面元素进行拖放时，可以支持自定义拖放时的背景图片，并在拖动的过程中显示自定义背景图片，摆脱了现有技术中不同的浏览器对自定义背景功能支持情况不一致的限制。
5.本发明的实施例可以这样实现：
6.一方面，本发明实施例提供了一种页面元素拖放方法，应用于电子设备中的浏览器，所述电子设备显示有所述浏览器的网页，并预先存储有背景图片，所述背景图片是自定义的；所述方法包括：
7.响应对所述网页中显示的预先创建的页面元素的长按操作，生成所述页面元素的复制页面元素；
8.响应对所述页面元素的与所述长按操作连续的拖动操作，沿所述拖动操作的拖动轨迹显示所述背景图片，其中，所述页面元素是显示在所述网页上的标签元素；
9.当检测到所述拖动操作结束时，停止显示所述背景图片，并获取所述拖动操作的结束位置；
10.若所述拖动操作的结束位置在所述网页中预先创建的目标区域内，则在所述目标区域显示所述复制页面元素。
11.在一种可能的实施方式中，在所述响应对所述网页中显示的预先创建的页面元素的长按操作，生成所述页面元素的复制页面元素的步骤之前，所述方法还包括：
12.创建容器和所述页面元素，及在所述网页中创建初始区域和所述目标区域，并将所述容器的显示属性设置为不可见；在所述初始区域中显示所述页面元素；
13.将所述背景图片挂载到所述容器中，以隐藏所述背景图片，所述背景图片和所述页面元素处于所述网页中的同一位置。
14.在一种可能的实施方式中，所述响应对所述页面元素的与所述长按操作连续的拖动操作，沿所述拖动操作的拖动轨迹显示所述背景图片的步骤，包括：
15.响应所述拖动操作，并获取所述拖动操作的实时位置；
16.根据所述拖动操作的实时位置，按照预设公式确定所述容器的当前位置；
17.根据所述当前位置，设置所述容器的定位属性，并将所述容器的显示属性设置为可见，以沿所述拖动操作的拖动轨迹显示背景图片。
18.在一种可能的实施方式中，所述拖动操作的实时位置包括第一横坐标和第一纵坐标；所述根据所述拖动操作的实时位置，按照预设公式确定所述容器的当前位置的步骤，包括：
19.根据所述第一横坐标，按照公式计算得到第二横坐标，其中，x表示所述第二横坐标，x表示所述第一横坐标，w表示所述容器的宽度；
20.根据所述第一纵坐标，按照公式计算得到第二纵坐标，其中，y表示所述第二纵坐标，y表示所述第一纵坐标，h表示所述容器的高度；
21.获得所述当前位置，所述当前位置包括所述第二横坐标和所述第二纵坐标。
22.在一种可能的实施方式中，所述根据所述当前位置，设置所述容器的定位属性、左边缘属性和上边缘属性，并将所述容器的显示属性设置为可见，以沿所述拖动操作的拖动轨迹显示背景图片的步骤，包括：
23.根据所述当前位置，将所述容器的定位属性设置为固定定位，并将左边缘属性设置为第二横坐标，将上边缘属性设置为第二纵坐标，以及将所述容器的显示属性设置为可见，以沿所述拖动操作的拖动轨迹显示背景图片。
24.在一种可能的实施方式中，在获取所述拖动操作的结束位置之后，所述方法还包括：
25.判断所述拖动操作的结束位置是否在所述目标区域内；
26.若所述拖动操作的结束位置不在所述目标区域内，则删除所述复制页面元素。
27.在一种可能的实施方式中，所述创建容器和所述页面元素，及在所述网页中创建初始区域和所述目标区域的方法，包括：
28.定义容器、所述页面元素，初始区域和所述目标区域，并为所述容器、所述页面元素、所述初始区域和所述目标区域配置参数；
29.根据所述参数，创建所述容器和所述页面元素；
30.根据所述参数，创建所述初始区域和所述目标区域，并进行布局，以在所述网页中显示所述初始区域和所述目标区域。
31.第二方面，本发明实施例还提供了一种页面元素拖放装置，应用于电子设备中的浏览器，所述电子设备显示有所述浏览器的网页，并预先存储有背景图片，所述背景图片是自定义的；所述装置包括：
32.复制模块，用于响应对所述网页中显示的预先创建的页面元素的长按操作，生成所述页面元素的复制页面元素，其中，所述页面元素是显示在所述网页上的标签元素；
33.拖动模块，用于响应对所述页面元素的与所述长按操作连续的拖动操作，沿所述拖动操作的拖动轨迹显示所述背景图片；
34.获取模块，用于当检测到所述拖动操作结束时，停止显示所述背景图片，并获取所述拖动操作的结束位置；
35.显示模块，用于若所述拖动操作的结束位置在所述网页中预先创建的目标区域内，则在所述目标区域显示所述复制页面元素。
36.第三方面，本发明实施例还提供了一种电子设备，所述电子设备安装有浏览器，所述电子设备包括：
37.一个或多个处理器；
38.存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现上述的页面元素拖放方法。
39.第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述的页面元素拖放方法。
40.相对现有技术，本发明实施例提供的一种页面元素拖放方法、装置、电子设备及存储介质，首先，响应用户对网页中显示的页面元素的长按操作，生成页面元素的复制页面元素；然后，响应对页面元素的与所述长按操作连续的拖动操作，沿拖动操作的拖动轨迹显示背景图片；最后，当检测到拖动操作结束时，停止显示背景图片，并获取拖动操作的结束位置；若拖动操作的结束位置在网页中预先创建的目标区域内，则在目标区域显示复制页面元素。这样，由于该方法应用于浏览器，所以对于各种浏览器都可以这样操作，摆脱了现有技术中不同的浏览器对自定义背景功能支持情况不一致的限制；此外，可以支持自定义拖放时的背景图片，并在拖动的过程中显示自定义背景图片。
附图说明
41.为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
42.图1为本发明实施例提供的电子设备的方框示意图。
43.图2为本发明实施例提供的页面元素拖放方法的一种流程示意图。
44.图3为本发明实施例提供的页面元素拖放方法的另一种流程示意图。
45.图4(a)为本发明实施例提供的页面拖放方法的过程示例图之一。
46.图4(b)为本发明实施例提供的页面拖放方法的过程示例图之二。
47.图4(c)为本发明实施例提供的页面拖放方法的过程示例图之三。
48.图4(d)为本发明实施例提供的页面拖放方法的过程示例图之四。
49.图5为图2示出的增强策略确定方法中步骤s120的流程示意图。
50.图6为本发明实施例提供的页面元素拖放方法的又一种流程示意图。
51.图7为本发明实施例提供的页面元素拖放装置的方框示意图。
52.图标：100-电子设备；101-存储器；102-处理器；103-总线；200-页面元素拖放装置；201-创建模块；202-复制模块；203-拖动模块；204-获取模块；205-显示模块。
gate array，fpga)、嵌入式arm等芯片。
65.在图1所示的电子设备100的基础上，对本实施例提供的页面元素拖放方法进行介绍。请参考图2，图2示出了本实施例提供的页面元素拖放方法的流程示意图，该方法包括以下步骤：
66.s110，响应对网页中显示的预先创建的页面元素的长按操作，生成所述页面元素的复制页面元素。
67.在本实施例中，页面元素拖放方法应用于电子设备中的浏览器，电子设备显示有浏览器的网页，其中，浏览器可以是，但不限于，ie浏览器和低版本的edge浏览器，或其他现代浏览器；网页可以是用户基于html语言(超文本标记语言)制作的网页。
68.页面元素是用于显示在网页上的标签元素。例如，在利用html语言进行网页开发时，任意的能够在《body》标签内展示的html标签元素，包括，但不限于，div(区隔标签元素)，span(行内标签元素)，h1-h6(标题标签元素)，p(块标签元素)，ol(有序列表元素)，ul(无序列表元素)，li(列表元素)等。对应到网页中，具体可以为网页中的文字、图片、音频、动画、视频、命令按钮等元素。
69.对于屏幕具有触摸功能的电子设备来说，长按操作可以是用手指长按屏幕的操作；对于屏幕不具有触摸功能的电子设备来说，长按操作可以是长按鼠标左键的操作。
70.生成复制页面元素后，将复制页面元素存储在内存中。
71.s120，响应对页面元素的与长按操作连续的拖动操作，沿拖动操作的拖动轨迹显示背景图片。
72.在本实施例中，电子设备预先存储有背景图片，背景图片可以是用户自定义的任意图片。
73.s130，当检测到拖动操作结束时，停止显示背景图片，并获取拖动操作的结束位置。
74.在本实施例中，拖动操作结束可以是，手指离开触摸屏，或者，松开鼠标左键，此时停止显示背景图片。
75.其中，停止显示背景图片可以通过将容器的显示属性设置为不可见来实现。
76.s140，若拖动操作的结束位置在网页中预先创建的目标区域内，则在目标区域显示复制页面元素。
77.在本实施例中，目标区域是预先在网页中创建的用于显示复制页面元素的区域，若拖动操作的结束位置在网页中预先创建的目标区域内，则将复制页面元素从内存中加载到目标区域进行显示。
78.此外，在目标区域显示复制页面元素之后，删除存储在内存中的复制页面元素，以释放内存。
79.相对于现有技术，本实施例提供的页面元素拖放方法，可以对显示在不同浏览器的网页上的页面元素进行拖放时，自定义拖放时的背景，提高了兼容性。
80.请参考图3，在步骤s110之前，还可以包括以下步骤：
81.s101，创建容器和所述页面元素，及在网页中创建初始区域和目标区域，并将容器的显示属性设置为不可见。
82.在本实施例中，容器用于挂载背景图片，初始区域用于显示页面元素，目标区域用
于显示复制页面元素。通常，容器可以使用css(cascading style sheets，层叠样式表)属性对容器的样式进行自定义，例如，显示属性display用于设置容器的可见或不可见，位置属性position用于设置容器的位置，左边缘属性left用于设置容器的左边缘的位置，上边缘属性top用于设置容器的上边缘的位置。
83.s102，在初始区域中显示页面元素。
84.s103，将背景图片挂载到容器中，以隐藏背景图片，背景图片和页面元素处于网页中的同一位置。
85.在一种可能的情形下，步骤s101中的创建容器和所述页面元素，及在网页中创建初始区域和目标区域，可以包括以下详细步骤：
86.第一步，定义容器、所述页面元素，初始区域和所述目标区域，并为所述容器、所述页面元素、所述初始区域和所述目标区域配置参数；
87.第二步，根据所述参数，创建所述容器和所述页面元素；
88.第三步，根据所述参数，创建所述初始区域和所述目标区域，并进行布局，以在所述网页中显示所述初始区域和所述目标区域。
89.在本实施例中，为了方便理解，s101-s103可以按照下述过程实现：
90.在制作网页的时候，首先需要进行参数配置，包括定义容器、页面元素，初始区域、目标区域和背景图片。然后，根据配置的参数，在网页中创建初始区域和目标区域，并添加css(cascading style sheets，层叠样式表)样式进行页面布局，以将初始区域和目标区域显示在网页中；创建容器，并设置容器的css属性display为none，以隐藏容器。
91.最后，将页面元素挂载到初始区域中进行显示，并将背景图片挂载到容器中，以隐藏背景图片。
92.需要说明的是，上述创建的容器、页面元素、初始区域和目标区域都是div元素，例如，页面元素可以为一个宽度和高度都为50px的《div》《/div》，背景图片可以为一张高度和宽度都为100px的图片元素。
93.此外，在具体的实施过程中，在将页面元素挂载到初始区域中进行显示之前，还可以为页面元素添加可拖动的标识data-drag＝true，以表征该页面元素为可拖动的页面元素。
94.那么，相对应的，步骤s110中，在检测到长按操作后，首先判断与长按操作关联的页面元素是否有drag-drag＝true标识，若是，则生成所述页面元素的复制页面元素，并存储在内存中，若否，则为该页面元素添加可拖动的标识data-drag＝true。
95.为了便于对上述过程的理解，请参考图4(a)-图4(d)，图4(a)-图4(d)为本实施例提供的页面元素拖放方法的过程示例图。使用任意浏览器打开网页，网页上显示有初始区域、目标区域和页面元素，此时，背景图片隐藏在初始区域中。
96.用户长按页面元素，如图4(a)所示，生成复制页面元素并存储在内存中；然后，保持长按的动作，在网页上移动，如图4(b)所示，此时，网页中显示的是背景图片，并沿着拖动操作的轨迹曲线移动。
97.然后，如图4(c)所示，当背景图片在目标区域时，停止移动，但仍保持长按操作，此时，页面上显示的仍是背景图片；最后，手指离开触摸屏，或者，松开鼠标左键，拖动操作结束，如图4(d)所示，此时隐藏背景图片，并将复制页面元素从内存加载到目标区域进行显
示。下面对步骤s120进行详细介绍，在图2的基础上，请参考图5，步骤s120可以包括以下详细步骤：
98.s1201，响应拖动操作，并获取所述拖动操作的实时位置。
99.在本实施例中，拖动操作的实时位置可以是，手指在电子设备100的触摸屏上的实时位置，或者，鼠标的光标在电子设备100的屏幕上的实时位置。
100.s1202，根据拖动操作的实时位置，按照预设公式确定容器的当前位置。
101.在本实施例中，容器的当前位置和拖动操作的实时位置对应，以在沿拖动操作的轨迹曲线显示背景图片。
102.s1203，根据当前位置，设置容器的定位属性、左边缘属性和上边缘属性，并将所述容器的显示属性设置为可见，以沿拖动操作的拖动轨迹显示背景图片。
103.相对于现有技术，本实施例提供的页面元素拖放方法仅需在首次拖放时，将背景图片载入到容器中，并设置容器沿着拖动操作的轨迹曲线移动，后续拖动只需改变容器的css属性，即可实现沿拖动操作的轨迹曲线显示背景图片的效果，避免反复创建容器和背景图片，节约了浏览器性能。
104.在一种可能的情形下，拖动操作的实时位置包括第一横坐标和第一纵坐标；步骤s1203可以包括以下详细步骤：
105.第一步，根据第一横坐标，按照公式计算得到第二横坐标，其中，x表示第二横坐标，x表示第一横坐标，w表示容器的宽度。
106.在本实施例中，第一横坐标和第一纵坐标分别是指拖动操作的实时位置距离浏览器窗口的左侧的距离和距离浏览器窗口的顶部的距离。
107.第二步，根据第一纵坐标，按照公式计算得到第二纵坐标，其中，y表示第二纵坐标，y表示第一纵坐标，h表示容器的高度。
108.第三步，获得当前位置，当前位置包括第二横坐标和第二纵坐标。
109.下面对步骤s1204进行详细介绍，步骤s1204可以包括以下详细步骤：
110.根据当前位置，将容器的定位属性设置为固定，并将左边缘属性设置为第二横坐标，将上边缘属性设置为第二纵坐标，以及将容器的显示属性设置为可见，以沿拖动操作的拖动轨迹显示背景图片。
111.在本实施例中，将容器的定位属性设置为fixed是指将容器的css属性position为fixed相对浏览器窗口定位，将容器的显示属性设置为可见是指将容器的css属性display设置为非none，以显示背景图片；然后通过不断刷新left值和top值，以沿拖动操作的拖动轨迹显示背景图片。
112.在图2的基础上，请参考图6，在步骤s130之后，方法还可以包括以下步骤：
113.s131，判断拖动操作的结束位置是否在目标区域内。
114.s132，若拖动操作的结束位置不在目标区域内，则删除复制页面元素。
115.在本实施例中，删除复制页面元素是指将复制页面元素从内存中删去。
116.在本实施例中，具体来说，可以通过将容器的css属性display设置为none，以隐藏容器中的背景图片。
117.与现有技术相比，本实施例具有以下有益效果：
118.首先，本实施例提供的页面元素拖放方法，对显示在的网页中的页面元素进行拖放时，对于一些原本不支持自定义拖放背景的浏览器，可以自定义拖放时的背景，提高了网页的兼容性。
119.其次，仅需在首次拖放时，将背景图片载入到容器中，并设置容器沿着拖动操作的轨迹曲线移动，后续拖动只需改变容器的css属性，即可实现沿拖动操作的轨迹曲线显示背景图片的效果，避免反复创建容器，节约了浏览器性能。
120.请参考图7，图7示出了本实施例提供的页面元素拖放装置200的方框示意图。页面元素拖放装置200应用于电子设备100中的浏览器，页面元素拖放装置200可以是安装在浏览器中的一个插件，电子设备100显示有浏览器的网页，并预先存储有背景图片，背景图片是自定义的。该装置包括：创建模块201，复制模块202，拖动模块203，获取模块204，显示模块205。
121.复制模块202，响应对网页中显示的预先创建的页面元素的长按操作，生成页面元素的复制页面元素，其中，页面元素是显示在所述网页上的标签元素。
122.拖动模块203，用于响应对页面元素的与长按操作连续的拖动操作，沿拖动操作的拖动轨迹显示背景图片。
123.获取模块204，用于当检测到拖动操作结束时，停止显示背景图片，并获取拖动操作的结束位置。
124.显示模块205，用于若拖动操作的结束位置在网页中预先创建的目标区域内，则在目标区域显示复制页面元素。
125.可选的，创建模块201，用于：
126.创建容器和页面元素，及在网页中创建初始区域和目标区域，并将容器的显示属性设置为不可见；在初始区域中显示页面元素；
127.将背景图片挂载到所述容器中，以隐藏所述背景图片，背景图片和页面元素处于网页中的同一位置。
128.可选的，拖动模块203执行响应对页面元素的与长按操作连续的拖动操作，沿拖动操作的拖动轨迹显示背景图片的方式，包括：
129.响应拖动操作，并获取拖动操作的实时位置；
130.根据拖动操作的实时位置，按照预设公式确定容器的当前位置；
131.根据当前位置，设置容器的定位属性、左边缘属性和上边缘属性，并将容器的显示属性设置为可见，以沿拖动操作的拖动轨迹显示背景图片。
132.可选的，拖动操作的实时位置包括第一横坐标和第一纵坐标；拖动模块203执行根据拖动操作的实时位置，按照预设公式确定容器的当前位置的方式，包括：
133.根据第一横坐标，按照公式计算得到第二横坐标，其中，x表示第二横坐标，x表示第一横坐标，w表示容器的宽度；
134.根据第一纵坐标，按照公式计算得到第二纵坐标，其中，y表示第二纵坐标，y表示第一纵坐标，h表示容器的高度；
135.获得当前位置，当前位置包括第二横坐标和第二纵坐标。
136.可选的，拖动模块203执行根据当前位置，设置容器的定位属性、左边缘属性和上
边缘属性，并将所述容器的显示属性设置为可见，以沿拖动操作的拖动轨迹显示背景图片的方式，包括：
137.根据当前位置，将容器的定位属性设置为固定定位，并将左边缘属性设置为第二横坐标，将上边缘属性设置为第二纵坐标，以及将所述容器的显示属性设置为可见，以沿拖动操作的拖动轨迹显示背景图片。
138.可选的，获取模块204，还用于：
139.判断拖动操作的结束位置是否在目标区域内；
140.若拖动操作的结束位置不在目标区域内，则删除复制页面元素。
141.可选的，创建模块201执行创建容器和所述页面元素，及在所述网页中创建初始区域和所述目标区域的方式，包括：
142.定义容器、页面元素，初始区域和目标区域，并为容器、页面元素、初始区域和目标区域配置参数；
143.根据参数，创建容器和页面元素；
144.根据参数，创建初始区域和目标区域，并进行布局，以在网页中显示初始区域和目标区域。
145.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的页面元素拖放装置200的具体工作过程。可以参考前述方法实施例中的对应过程，在此不再赘述。
146.本实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器102执行时实现上述实施例揭示的页面元素拖放方法。
147.综上所述，本发明实施例提供的一种页面元素拖放方法、装置、电子设备及存储介质，首先，响应用户对网页中显示的预先创建的页面元素的长按操作，生成页面元素的复制页面元素；然后，响应对页面元素的与所述长按操作连续的拖动操作，沿拖动操作的拖动轨迹显示背景图片；最后，当检测到拖动操作结束时，停止显示背景图片，并获取拖动操作的结束位置；若拖动操作的结束位置在网页中预先创建的目标区域内，则在目标区域显示复制页面元素。这样，由于该方法应用于浏览器，所以对于各种浏览器都可以这样操作，摆脱了现有技术中不同的浏览器对自定义背景功能支持情况不一致的限制；此外，可以支持自定义拖放时的背景图片，并在拖动的过程中显示自定义背景图片。
148.以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。