[发明专利]一种实现网页内多元素拖动的方法和装置

说明书

本申请提供了一种实现网页内多元素拖动的方法，该方法包括：当检测到鼠标选中多个元素并进行拖动时，创建用于模拟所述多个元素的聚合状态的第一临时元素，并设置所述第一临时元素的当前坐标为拖动前鼠标的当前坐标；在鼠标拖动的过程中，获取鼠标的当前坐标，如果鼠标的当前坐标与所述第一临时元素的当前坐标之间的偏移量超过预设阈值，则将所述第一临时元素的当前坐标设置为鼠标的当前坐标；检测到鼠标拖动结束时，根据鼠标的当前坐标设置所述多个元素的当前坐标，并删除所述第一临时元素。本发明能够同时支持拖动多个元素，且能够兼容所有主流浏览器。

技术领域

本申请涉及计算机技术领域，特别涉及一种实现网页内多元素拖动的方法和装置。

背景技术

目前实现网页内元素拖放的技术方案主要有两种，一种是通过在浏览器系统内置对拖动事件的支持实现网页内元素拖动；另一种是通过HTML5的drag API实现网页内元素拖动。

通过在浏览器系统内置对拖动事件的支持实现网页内元素拖动的方案如下：

（1）监听鼠标移动（mousemove）事件，当检测到用户在某元素E上按下鼠标左键并移动鼠标时，调用系统内置的drag Drop方法初始化E；

（2）监听拖动开始（dragstart）事件，在E被正式拖动前，对E进行必要的初始化，例如改变E的透明度；

（3）监听拖动（drag）事件，对于默认不支持拖动的元素，需获取鼠标当前鼠标的坐标位置(x，y)，并根据该坐标相应设置E的坐标位置；

（4）监听拖动结束（dragend）事件，拖动事件结束。

通过在浏览器系统内置对拖动事件的支持实现网页内元素拖动的方案，同一时间内只支持拖动一个元素，且仅适用于windows平台特定版本的IE浏览器。

通过HTML5的drag API实现网页内元素拖动的方案如下：

（1）对于将要拖动的元素F，将其draggable属性设置为true；

（2）监听dragstart事件，在F被正式拖动前，对F进行必要的初始化，例如改变F的透明度；

（3）监听drag事件，在F被拖动的过程中，进行必要的处理，例如显示F的坐标；

（4）监听dragend事件，拖动事件结束。

通过HTML5的drag API实现网页内元素拖动的方案，同一时间内也只支持拖动一个元素，且仅适用于支持HTML5的浏览器，对于低版本浏览器（例如IE9版本以下的IE浏览器）则不支持。

发明内容

有鉴于此，本发明的目的在于提供一种实现网页内多元素拖动的方法，该方法能够同时支持拖动多个元素，且能够兼容所有主流浏览器。

为了达到上述目的，本发明提供了一种实现网页内多元素拖动的方法，该方法包括：

当检测到鼠标选中多个元素并进行拖动时，创建用于模拟所述多个元素的聚合状态的第一临时元素，并设置所述第一临时元素的当前坐标为拖动前鼠标的当前坐标；

在鼠标拖动的过程中，获取鼠标的当前坐标，如果鼠标的当前坐标与所述第一临时元素的当前坐标之间的偏移量超过预设阈值，则将所述第一临时元素的当前坐标设置为鼠标的当前坐标；

检测到鼠标拖动结束时，根据鼠标的当前坐标设置所述多个元素的当前坐标，并删除所述第一临时元素。

本发明还提供了一种实现网页内多元素拖动的装置，该装置包括：检测单元，创建单元，平移单元，删除单元；

所述检测单元，用于检测鼠标是否选中了多个元素并进行拖动；用于检测鼠标拖动是否结束；