CN115220628B - 元素拖拽方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供了一种元素拖拽方法、装置、电子设备及存储介质。元素拖拽方法包括：在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移，根据检测到点击操作时，子级元素在浏览器页面中的第一坐标以及拖拽位移确定子级元素在浏览器页面的第二坐标；根据第二坐标以及父级元素在浏览器页面中的第三坐标，确定子级元素在父级元素中的第一相对坐标，若第一相对坐标在预设坐标范围内，根据第二坐标移动子级元素的位置，否则，停止移动子级元素，从而可以根据当前的拖拽位移实时更新子级元素的位置，子级元素不会超出父级元素所在的区域，且计算过程简单，从而可以在子级元素跟随拖拽操作移动的过程中呈现较好的视觉效果。

Description

元素拖拽方法、装置、电子设备及存储介质

技术领域

本申请属于终端设备领域，尤其涉及元素拖拽方法、装置、电子设备及存储介质。

背景技术

在浏览器的一些使用场景中，存在拖拽浏览器上显示的元素的需求。例如，在浏览器进行视频通话时存在拖拽小窗口的需求，在浏览器进行身份验证时存在移动图形的需求等。若将现有的实现拖拽子级元素的组件应用在浏览器中，存在引入其他组件较多的问题，解析复杂，在浏览器中拖拽元素时不能呈现较好的视觉效果。

发明内容

有鉴于此，本申请实施例提供了元素拖拽方法、装置、电子设备及存储介质，用以解决现有技术中在浏览器中拖拽元素时不能呈现较好的视觉效果。

本申请实施例的第一方面提供了一种元素拖拽方法，包括：

在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移；

根据检测到所述点击操作时，所述子级元素在所述浏览器页面中的第一坐标以及所述拖拽位移确定所述子级元素在所述浏览器页面的第二坐标；

根据所述第二坐标以及父级元素在所述浏览器页面中的第三坐标，确定所述子级元素在所述父级元素中的第一相对坐标，所述子级元素位于所述父级元素的上层；

若所述第一相对坐标在预设坐标范围内，根据所述第二坐标移动所述子级元素的位置，所述预设坐标范围用于表示所述子级元素在所述父级元素内的移动范围；

若所述第一相对坐标不在所述预设坐标范围内，则停止移动所述子级元素。

在一种可能的实现方式中，在停止移动所述子级元素之后，所述方法还包括：

若检测到所述拖拽操作未停止，继续根据所述拖拽操作确定所述子级元素在所述父级元素中的第二相对坐标，以及所述子级元素在所述浏览器页面中的第四坐标；

若第二相对坐标在所述预设坐标范围内，根据所述第四坐标移动所述子级元素的位置。

在一种可能的实现方式中，在所述根据所述第二坐标移动所述子级元素的位置之后，所述方法还包括：

若检测到停止拖拽的操作，则停止移动所述子级元素。

在一种可能的实现方式中，所述子级元素的形状为方形，所述子级元素在所述浏览器页面中的第一坐标由所述子级元素的第一边框到所述浏览器页面的第一边界之间的距离，以及所述子级元素的第二边框到所述浏览器页面的第二边界之间的距离确定，所述第一边框与所述第二边框垂直，所述第一边界与所述第二边界垂直。

在一种可能的实现方式中，在所述确定所述子级元素在所述父级元素中的第一相对坐标之前，所述方法还包括：

根据所述父级元素的尺寸以及预设的不被遮挡区域，确定所述子级元素的移动区域；

根据所述移动区域以及所述子级元素的尺寸确定所述预设坐标范围。

在一种可能的实现方式中，所述确定当前的拖拽位移包括，

根据执行点击操作的点击对象当前所在的位置，以及执行所述点击操作的位置，计算当前的拖拽位移。

在一种可能的实现方式中，在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移，包括：

在浏览器页面检测到对子级元素的点击操作和拖拽操作时，调用子级元素的位置更新程序，确定当前的拖拽位移，所述位置更新程序由Javascript语言编写得到。

本申请实施例的第二方面提供了一种元素拖拽装置，包括：

检测模块，用于在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移；

第一确定模块，用于根据检测到所述点击操作时，所述子级元素在所述浏览器页面中的第一坐标以及所述拖拽位移确定所述子级元素在所述浏览器页面的第二坐标；

第二确定模块，用于根据所述第二坐标以及父级元素在所述浏览器页面中的第三坐标，确定所述子级元素在所述父级元素中的第一相对坐标，所述子级元素位于所述父级元素的上层；

第一移动模块，用于若所述第一相对坐标在预设坐标范围内，根据所述第二坐标移动所述子级元素的位置，所述预设坐标范围用于表示所述子级元素在所述父级元素内的移动范围；

第二移动模块，用于若所述第一相对坐标不在所述预设坐标范围内，则停止移动所述子级元素。

本申请实施例的第三方面提供了一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面所述的元素拖拽方法。

本申请实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上述第一方面所述的元素拖拽方法。

本申请实施例的第五方面提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行上述第一方面中任一项所述的元素拖拽方法。

本申请实施例与现有技术相比存在的有益效果是：根据拖拽操作确定当前的拖拽位移，根据拖拽位移确定理论上子级元素在所述浏览器页面的第二坐标，再根据第二坐标以及父级元素在浏览器页面中的第三坐标，确定子级元素在父级元素中的第一相对坐标，若第一相对坐标在预设坐标范围内，根据第二坐标移动子级元素的位置，若第一相对坐标不在预设坐标范围内，则停止移动子级元素，从而可以根据当前的拖拽位移实时更新子级元素的位置，子级元素不会超出父级元素所在的区域，且计算过程简单，从而可以在子级元素跟随拖拽操作移动的过程中呈现较好的视觉效果。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1是本申请一实施例提供的元素拖拽方法的实现流程示意图；

图2是本申请实施例提供的浏览器界面示意图；

图3是本申请一实施例提供的元素拖拽装置示意图；

图4是本申请实施例提供的电子设备的结构示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

如在本说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

另外，在本申请的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在浏览器的一些使用场景中，存在拖拽浏览器上显示的元素的需求，现有的实现拖拽子元素的组件，存在引入其他组件较多或者不兼容的问题，在浏览器中拖拽元素时不能呈现较好的视觉效果。

为此，本申请提供一种元素拖拽方法，通过当前的拖拽位移确定子级元素在浏览器页面上的坐标，再确定子级元素在父级元素上的相对坐标，根据相对坐标确定子级元素是否超出预设坐标范围，根据不同的情况更新子级元素的位置，从而可以根据当前的拖拽位移实时更新子级元素的位置，且子级元素不会超过预设坐标范围，同时计算过程简单，可以在子级元素跟随拖拽操作移动的过程中呈现较好的视觉效果。

下面对本申请提供的元素拖拽方法进行示例性说明。

本申请提供的元素拖拽方法用于根据用户操作移动浏览器中的子级元素。例如，用户通过浏览器打开视频通话的窗口，该视频通话的窗口为父级元素。视频通话的窗口中显示对方的视频画面，同时在视频通话窗口上有一个小窗口，用于显示自己的视频画面，该小窗口为子级元素。子级元素可能会遮挡父级元素中的重要内容，用户可以通过拖拽操作移动子级元素，避免子级元素遮挡父级元素的重要内容。又例如，在进行身份验证时，浏览器上显示身份验证的窗口，该窗口为父级元素，在身份验证的窗口，需要将图片移动至指定位置，该图片即为子级元素，用户通过移动子级元素可以完成身份验证。

请参阅附图1，本申请一实施例提供的元素拖拽方法包括：

S101：在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移。

其中，点击操作可以是按下鼠标的操作，也可以是触摸操作，对应地，拖拽操作可以是按下鼠标后拖动鼠标的操作，在松开鼠标时，拖拽操作结束。拖拽操作也可以是触摸操作后的滑动操作，在触摸结束时，拖拽操作结束。

电子设备在检测到点击操作后，判断在预设时长内是否检测到拖拽操作，若未检测到拖拽操作，则不进行后续计算，若检测到拖拽操作，则确定当前的拖拽位移。其中，若检测到拖拽操作，电子设备可以按照预设周期(例如1ms)计算拖拽位移，从而可以实时计算拖拽位移，进而实时更新子级元素的坐标。

在一实施例中，拖拽位移包括拖拽的距离和方向，可以用二维坐标表示。根据执行点击操作的点击对象当前所在的位置，以及执行点击操作的位置，计算当前的拖拽位移。例如，若点击操作是按下鼠标的操作，则点击对象是鼠标，鼠标的位置是指鼠标对应的光标在显示界面上的位置。则根据执行点击操作的位置以及光标当前所在的位置即可确定拖拽位移，拖拽位移即为拖拽过程中光标移动的位移。拖拽位移可以用执行点击操作的坐标以及点击对象当前所在的坐标之间的差值表示。例如，拖拽位移中的横坐标可以用点击对象当前的横坐标与执行点击操作时的横坐标的差值表示，拖拽位移中的纵坐标可以用点击对象当前的纵坐标与点击操作时的纵坐标的差值表示。根据点击操作的位置实时计算拖拽位移，提高了距离计算的准确度。

在其他实施例中，也可以根据点击对象上一时刻所在的位置以及当前时刻所在的位置实时计算拖拽位移。

S102：根据检测到所述点击操作时，所述子级元素在所述浏览器页面中的第一坐标以及所述拖拽位移确定所述子级元素在所述浏览器页面的第二坐标。

其中，第二坐标相对于第一坐标的位移可以与拖拽位移相同。例如，第一坐标中的横坐标与拖拽位移的横坐标的和即为第二坐标的横坐标，第一坐标中的纵坐标与拖拽位移的纵坐标的和即为第二坐标的纵坐标。

第二坐标相对于第一坐标的位移也可以与拖拽位移存在预设的比例关系。例如，拖拽位移的横坐标乘以比例系数后，与第一坐标中的横坐标相加，得到第二坐标的横坐标，拖拽位移的纵坐标乘以比例系数后，与第一坐标中的纵坐标相加，得到第二坐标的纵坐标。

其中，子级元素在浏览器页面的坐标是子级元素的参考点所在的坐标，参考点可以是子级元素的中心点、顶点或者其他设定的位置。

在一实施例中，如图2所示，子级元素的形状为方形，子级元素21在浏览器页面22中的第一坐标包括横坐标和纵坐标，横坐标等于子级元素21的第一边框到浏览器页面的第一边界之间的距离，纵坐标等于子级元素21的第二边框到浏览器页面22的第二边界之间的距离，第一边框与第二边框垂直，第一边界与第二边界垂直，从而实现子级元素的准确定位。

在其他实施例中，子级元素的形状也可以是圆形或者其他不规则图形，子级元素在浏览器页面中的第一坐标也可以包括子级元素中的参考点到浏览器页面的第一边界和第二边界的距离。

S103：根据所述第二坐标以及父级元素在所述浏览器页面中的第三坐标，确定所述子级元素在所述父级元素中的第一相对坐标，所述子级元素位于所述父级元素的上层。

具体地，如图2所示，父级元素23在浏览器页面22中的第三坐标也是二维坐标，二维坐标中的两个数值分别是父级元素23的第三边框到第一边界之间的距离，以及父级元素23的第四边框到第二边界之间的距离，第三边框和第四边框垂直。

在一实施例中，第二坐标与第三坐标的差值即为第一相对坐标，即第二坐标的横坐标与第三坐标的横坐标的差值为第一相对坐标的横坐标，第二坐标的纵坐标与第三坐标的纵坐标的差值为第一相对坐标的纵坐标。

在另一实施例中，根据第一坐标以及第三坐标，可以确定检测到点击操作时子级元素在父级元素中的第二相对坐标。第二坐标与第一坐标之间的差值表示子级元素的移动位移，第二相对坐标与该差值的和即为第一相对坐标。

S104：若所述第一相对坐标在预设坐标范围内，根据所述第二坐标移动所述子级元素的位置，所述预设坐标范围用于表示所述子级元素在所述父级元素内的移动范围。

具体地，若第一相对坐标在预设坐标范围内，说明根据当前的拖拽位移移动子级元素，子级元素不会超出父级元素所在的区域，则电子设备将子级元素移动至第二坐标。由于拖拽位移实时更新，对应的第二坐标也实时更新，从而可以形成子级元素跟随拖拽操作移动的视觉效果。例如，若拖拽操作是拖动鼠标的操作，则对应形成子级元素跟随光标移动的视觉效果。

在一实施例中，第一相对坐标表示子级元素在父级元素内移动的距离。预设坐标范围包括第一方向上子级元素可以在父级元素内移动的距离，以及第二方向上子级元素可以在父级元素内移动的距离。预设坐标范围由父级元素的尺寸以及子级元素的尺寸确定。具体地，确定参考点或者参考线后，父级元素在第一方向上的长度与子级元素在第一方向上的长度之间的差值为第一方向上子级元素可以在父级元素内移动的距离；父级元素在第二方向上的长度与子级元素在第二方向上的长度之间的差值为第二方向上子级元素可以在父级元素内移动的距离。

在一实施例中，根据父级元素的尺寸以及预设的不被遮挡区域，确定子级元素的移动区域，根据移动区域的尺寸以及子级元素的尺寸确定预设坐标范围，从而可以使子级元素在设定的区域内移动。例如，如图2所示，父级元素所在的区域中，虚线a上方的区域extraEdge1以及虚线b上方的区域extraEdge2为不被遮挡区域，则虚线a与虚线b之间的区域为子级元素的移动区域。以子级元素的一条边框作为参考线，parentW为第一方向上子级元素可以在父级元素内移动的距离，parentH为第二方向上子级元素可以在父级元素内移动的距离。

S105：若所述第一相对坐标不在所述预设坐标范围内，则停止移动所述子级元素。

例如，在拖动鼠标的过程中，若确定第一相对坐标不在预设坐标范围内，则在拖动鼠标的过程中，子级元素停留在父级元素的边缘位置不再移动，以保证子级元素不超过父级元素所在的区域。

在一实施例中，在停止移动子级元素后，电子设备继续监听拖拽操作，根据拖拽操作执行上述S101-S103的步骤。即确定当前的拖拽位移，同时根据拖拽位移计算子级元素在父级元素中的第二相对坐标，以及子级元素在浏览器页面中的第四坐标。在检测到第二相对坐标在预设坐标范围内时，根据第四坐标移动子级元素的位置，从而使子级元素从父级元素的边缘位置移动到预设坐标范围内的动作更加连贯，形成较好的视觉效果。

在一实施例中，在根据拖拽操作在预设坐标范围内移动子级元素或者停止移动子级元素后，若检测到停止拖拽的操作，则停止移动子级元素，从而形成子级元素跟随拖拽操作移动的视觉效果。其中，停止拖拽的操作可以是松开鼠标或者停止滑动的操作。

上述实施例中，根据拖拽位移确定子级元素在父级元素上的相对坐标，根据相对坐标确定子级元素是否在预设坐标范围内，若第一相对坐标在预设坐标范围内，根据第二坐标移动子级元素的位置，若第一相对坐标不在预设坐标范围内，则停止移动子级元素，从而可以根据当前的拖拽位移实时更新子级元素的位置，且子级元素不会超过预设坐标范围，同时计算过程简单，可以在子级元素跟随拖拽操作移动的过程中呈现较好的视觉效果。

在一实施例中，在浏览器页面检测到对子级元素的点击操作和拖拽操作时，调用子级元素的位置更新程序，执行上述元素拖拽方法，位置更新程序由Javascript(简称js)语言编写得到。由于大部分浏览器都可以识别js语言，因此，采用js语言编写的程序可以兼容不同浏览器的展示效果。且采用js语言编写的程序实现子级元素的拖拽功能计算逻辑简单，不用依赖其他的插件和框架功能，因此可以减少浏览器的解析过程，实现流畅的拖拽效果。

示例性地，定义以下参数：

moveX:记录子级元素鼠标点击时的横坐标,

moveY:记录子级元素鼠标点击时的纵坐标,

divOffsetX:子级元素和浏览器边界之间的横坐标距离,

divOffsetY:子级元素和浏览器边界之间的纵坐标距离,

boxW:父级元素的宽度,

boxH:父级的元素高度,

parentW:子级元素在父级元素内可移动的宽度,

parentH:子级元素在父级元素内可移动高度,

moveBoxW:子级元素的宽度,

moveBoxH:子级元素的高度,

extraEdge:不被遮挡区域的高度,

使用Html语音定义子级元素的高度、子级元素的宽度、父级元素的高度、父级元素的宽度等参数，采用js语音执行上述元素拖拽方法。

例如，在检测到拖拽操作时，若拖拽操作是拖动鼠标的操作，鼠标在子级元素上按下时确定操作开始，记录初始位置：

onmousedown＝"moveStart(event)"

moveX＝e.clientX

moveY＝e.clientY

divOffsetX＝moveDiv.offsetLeft

divOffsetY＝moveDiv.offsetTop；

鼠标在子级元素上松开时操作结束，根据拖拽操作确定第一相对坐标：

onmouseup＝"moveEnd()"

let moveleft＝(e.clientX-moveX+divOffsetX).toFixed(2)

let movetop＝(e.clientY-moveY+divOffsetY).toFixed(2)

确定是否在第一预设坐标范围内：

const styleX＝moveleft>＝parentW？parentW:moveleft<＝0？0:moveleft

const styleY＝movetop>＝parentH？parentH:movetop<＝extraEdge？extraEdge:movetop

最后，将得到的子级元素的坐标赋值给子级元素，以根据子级元素的坐标移动子级元素：

moveDiv.style.left＝styleX+"px"

moveDiv.style.top＝styleY+"px"。

又例如，在检测到拖拽操作时，若拖拽操作是滑动操作，触摸子级元素时确定操作开始，记录初始位置：

ontouchstart＝"touchstart(event)"

ontouchmove＝"touchmove(event)"

moveX＝e.touches[0].clientX

moveY＝e.touches[0].clientY

divOffsetX＝moveDiv.offsetLeft

divOffsetY＝moveDiv.offsetTop

在触摸结束时，拖拽操作结束，根据拖拽操作确定第一相对坐标：

ontouchend＝"touchend()"

let moveleft＝(e.touches[0].clientX-moveX+divOffsetX).toFixed(2)

let movetop＝(e.touches[0].clientY-moveY+divOffsetY).toFixed(2)

确定是否在第一预设坐标范围内：

const styleX＝moveleft>＝parentW？parentW:moveleft<＝0？0:moveleft

const styleY＝movetop>＝parentH？parentH:movetop<＝extraEdge？extraEdge:movetop

最后，将得到的子级元素的坐标赋值给子级元素，以根据子级元素的坐标移动子级元素：

moveDiv.style.left＝styleX+"px"

moveDiv.style.top＝styleY+"px"

上述实施例中，通过定义子级元素和父级元素的尺寸，调用js编写的位置更新程序，可以采用简单的逻辑实现子级元素的移动，提高子级元素拖拽的流畅度。通过封装上述程序，输入子级元素和父级元素的尺寸，就可以在浏览器中被调用，实现流畅的拖动效果。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

对应于上文实施例所述的元素拖拽方法，图3示出了本申请实施例提供的元素拖拽装置的结构框图，为了便于说明，仅示出了与本申请实施例相关的部分。

如图3所示，元素拖拽装置包括，

检测模块31，用于在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移；

第一确定模块32，用于根据检测到所述点击操作时，所述子级元素在所述浏览器页面中的第一坐标以及所述拖拽位移确定所述子级元素在所述浏览器页面的第二坐标；

第二确定模块33，用于根据所述第二坐标以及父级元素在所述浏览器页面中的第三坐标，确定所述子级元素在所述父级元素中的第一相对坐标，所述子级元素位于所述父级元素的上层；

第一移动模块34，用于若所述第一相对坐标在预设坐标范围内，根据所述第二坐标移动所述子级元素的位置，所述预设坐标范围用于表示所述子级元素在所述父级元素内的移动范围；

第二移动模块35，用于若所述第一相对坐标不在所述预设坐标范围内，则停止移动所述子级元素。

在一种可能的实现方式中，第二移动模块35还用于：

若检测到所述拖拽操作未停止，继续根据所述拖拽操作确定所述子级元素在所述父级元素中的第二相对坐标，以及所述子级元素在所述浏览器页面中的第四坐标；

若第二相对坐标在所述预设坐标范围内，根据所述第四坐标移动所述子级元素的位置。

在一种可能的实现方式中，第一移动模块34还用于：

若检测到停止拖拽的操作，则停止移动所述子级元素。

在一种可能的实现方式中，所述子级元素的形状为方形，所述子级元素在所述浏览器页面中的第一坐标由所述子级元素的第一边框到所述浏览器页面的第一边界之间的距离，以及所述子级元素的第二边框到所述浏览器页面的第二边界之间的距离确定，所述第一边框与所述第二边框垂直，所述第一边界与所述第二边界垂直。

在一种可能的实现方式中，第二确定模块33还用于：

根据所述父级元素的尺寸以及预设的不被遮挡区域，确定所述子级元素的移动区域；

根据所述移动区域以及所述子级元素的尺寸确定所述预设坐标范围。

在一种可能的实现方式中，检测模块31还用于，

根据执行点击操作的点击对象当前所在的位置，以及执行所述点击操作的位置，计算当前的拖拽位移。

在一种可能的实现方式中，检测模块31具体用于：

在浏览器页面检测到对子级元素的点击操作和拖拽操作时，调用子级元素的位置更新程序，确定当前的拖拽位移，所述位置更新程序由Javascript语言编写得到。

需要说明的是，上述装置/单元之间的信息交互、执行过程等内容，由于与本申请方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

图4是本申请实施例提供的电子设备的结构示意图。所述电子设备可以是桌上型计算机、笔记本、掌上电脑等计算设备。

如图4所示，该实施例的电子设备包括：处理器41、存储器42以及存储在所述存储器42中并可在所述处理器41上运行的计算机程序43。所述处理器41执行所述计算机程序43时实现上述元素拖拽方法实施例中的步骤，例如图1所示的步骤S101至S105。或者，所述处理器41执行所述计算机程序43时实现上述各装置实施例中各模块/单元的功能，例如图3所示检测模块31至第二移动模块35的功能。

示例性的，所述计算机程序43可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器42中，并由所述处理器41执行，以完成本申请。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序43在所述电子设备中的执行过程。

本领域技术人员可以理解，图4仅仅是电子设备的示例，并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述电子设备还可以包括输入输出设备、网络接入设备、总线等。

所述处理器41可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器42可以是所述电子设备的内部存储单元，例如电子设备的硬盘或内存。所述存储器42也可以是所述电子设备的外部存储设备，例如所述电子设备上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器42还可以既包括所述电子设备的内部存储单元也包括外部存储设备。所述存储器42用于存储所述计算机程序以及所述电子设备所需的其他程序和数据。所述存储器42还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

在本申请所提供的实施例中，应该理解到，所揭露的装置/电子设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/电子设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、电载波信号、电信信号以及软件分发介质等。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (8)

1.一种元素拖拽方法，其特征在于，包括：

在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移；

根据检测到所述点击操作时，所述子级元素在所述浏览器页面中的第一坐标以及所述拖拽位移确定所述子级元素在所述浏览器页面的第二坐标；

根据父级元素的尺寸以及预设的不被遮挡区域，确定所述子级元素的移动区域；根据所述移动区域以及所述子级元素的尺寸确定预设坐标范围；

根据所述第二坐标以及所述父级元素在所述浏览器页面中的第三坐标，确定所述子级元素在所述父级元素中的第一相对坐标，所述子级元素位于所述父级元素的上层；

若所述第一相对坐标在所述预设坐标范围内，则根据所述第二坐标移动所述子级元素的位置，所述预设坐标范围用于表示所述子级元素在所述父级元素内的移动范围；

若所述第一相对坐标不在所述预设坐标范围内，则停止移动所述子级元素,若检测到所述拖拽操作未停止，则继续根据所述拖拽操作确定所述子级元素在所述父级元素中的第二相对坐标，以及所述子级元素在所述浏览器页面中的第四坐标；若第二相对坐标在所述预设坐标范围内，则根据所述第四坐标移动所述子级元素的位置。

2.如权利要求1所述的方法，其特征在于，在所述根据所述第二坐标移动所述子级元素的位置之后，所述方法还包括：

若检测到停止拖拽的操作，则停止移动所述子级元素。

3.如权利要求1所述的方法，其特征在于，所述子级元素的形状为方形，所述子级元素在所述浏览器页面中的第一坐标由所述子级元素的第一边框到所述浏览器页面的第一边界之间的距离，以及所述子级元素的第二边框到所述浏览器页面的第二边界之间的距离确定，所述第一边框与所述第二边框垂直，所述第一边界与所述第二边界垂直。

4.如权利要求1所述的方法，其特征在于，所述确定当前的拖拽位移包括，

根据执行点击操作的点击对象当前所在的位置，以及执行所述点击操作的位置，计算当前的拖拽位移。

5.如权利要求1所述的方法，其特征在于，在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移，包括：

在浏览器页面检测到对子级元素的点击操作和拖拽操作时，调用子级元素的位置更新程序，确定当前的拖拽位移，所述位置更新程序由Javascript语言编写得到。

6.一种元素拖拽装置，其特征在于，包括：

检测模块，用于在浏览器页面检测到对子级元素的点击操作和拖拽操作时，确定当前的拖拽位移；

第一确定模块，用于根据检测到所述点击操作时，所述子级元素在所述浏览器页面中的第一坐标以及所述拖拽位移确定所述子级元素在所述浏览器页面的第二坐标；根据父级元素的尺寸以及预设的不被遮挡区域，确定所述子级元素的移动区域；根据所述移动区域以及所述子级元素的尺寸确定预设坐标范围；

第二确定模块，用于根据所述第二坐标以及所述父级元素在所述浏览器页面中的第三坐标，确定所述子级元素在所述父级元素中的第一相对坐标，所述子级元素位于所述父级元素的上层；

第一移动模块，用于若所述第一相对坐标在所述预设坐标范围内，根据所述第二坐标移动所述子级元素的位置，所述预设坐标范围用于表示所述子级元素在所述父级元素内的移动范围；

第二移动模块，用于若所述第一相对坐标不在所述预设坐标范围内，则停止移动所述子级元素,若检测到所述拖拽操作未停止，则继续根据所述拖拽操作确定所述子级元素在所述父级元素中的第二相对坐标，以及所述子级元素在所述浏览器页面中的第四坐标；若第二相对坐标在所述预设坐标范围内，则根据所述第四坐标移动所述子级元素的位置。

7.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述的方法。

8.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述的方法。