[发明专利]网页中拖拽组件定位方法、存储介质、电子设备及系统

说明书

本发明公开了一种网页中拖拽组件定位方法、存储介质、电子设备及系统，涉及网页布局技术领域，本发明监听网页中的组件拖拽开始事件；发生组件拖拽开始事件时，获取鼠标拖拽组件的组件ID和版本号；发生鼠标拖拽组件的丢下事件时，获取组件被丢下时在页面中的层级；比较鼠标拖拽组件与其同级组件的位置关系，确定鼠标拖拽组件在该层级内的位置顺序，实现便捷、准确获取鼠标拖拽组件的层级和位置顺序。

技术领域

本发明涉及网页布局技术领域，具体涉及一种网页中拖拽组件定位方法、存储介质、电子设备及系统。

背景技术

webMarket是一个开发人员通过拖拽页面表现组件来搭建网页的在线平台。该平台可以在浏览器里面访问并使用，平台提供了大量可视化的页面基础元素组件，只需要合适配置就可以完成相关功能或者展示相关内容，比如文字组件，图片组件等等。通过鼠标操作拖拽组件到画布的相应位置，然后使用属性编辑器对组件进行编辑，最终拼成一个完整页面以供预览和发布。

webMarket搭建出来的页面是由组件按照一定的层次和顺序组合而成的，排列层次和顺序布局决定了页面中各个组件的定位。开发人员在浏览器中使用webMarket搭建页面的时候，往往想要搭建一个完整的页面需要使用到上百个组件，组件的层次可能多达十几层，如果使用代码去控制组件间的层次和顺序，首先会不直观，而且对于非专业人员来说操作十分繁复。

因此，亟需一种能实现便捷、准确获取鼠标拖拽组件的层级和位置顺序的技术方案。

发明内容

针对现有技术中存在的缺陷，本发明解决的技术问题为：实现便捷、准确获取鼠标拖拽组件的层级和位置顺序。

为达到以上目的，本发明采取的技术方案是：一种网页中拖拽组件定位方法：

监听网页中的组件拖拽开始事件；

发生组件拖拽开始事件时，获取鼠标拖拽组件的组件ID和版本号；

发生鼠标拖拽组件的丢下事件时，获取鼠标拖拽组件被丢下时在页面中的层级；

比较鼠标拖拽组件与其同级组件的位置关系，确定鼠标拖拽组件在该层级内的位置顺序，所述同级组件为与所述鼠标拖拽组件位于同一层级内的所有组件。

在上述技术方案的基础上，所述页面中的层级包括组件直接放置在页面中和组件放置在其他组件中。

在上述技术方案的基础上，比较鼠标拖拽组件与其同级组件的位置关系，确定鼠标拖拽组件在该层级内的位置顺序的方法为：

获取鼠标拖拽组件的鼠标纵坐标，所述鼠标纵坐标以屏幕右上角为坐标原点；

遍历鼠标拖拽组件的所有同级组件，若鼠标拖拽组件的鼠标纵坐标小于其同级组件的纵向偏移量加上其同级组件自身一半的高度，则该鼠标拖拽组件放置在该同级组件前面；所述纵向偏移量为该同级组件距屏幕上缘的距离。

在上述技术方案的基础上，完成鼠标拖拽组件在页面中的层级及位置顺序的确定后，清空全部已获取的组件ID和版本号。

本发明还公开了一种存储介质，该存储介质上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现所述的网页中拖拽组件定位方法。

本发明还公开了一种电子设备，包括存储器和处理器，存储器上储存有在处理器上运行的计算机程序：处理器执行计算机程序时实现所述的网页中拖拽组件定位方法。

本发明还公开了一种网页中拖拽组件定位系统，包括：

拖拽事件监听模块，其用于监听网页中的组件拖拽开始事件；发生组件拖拽开始事件时，获取用户鼠标拖拽组件的组件ID和版本号；

层级判断模块，其用于发生鼠标拖拽组件的丢下事件时，获取组件被丢下时在页面中的层级；