[发明专利]一种javascript拖拽方法和装置

说明书

技术领域

本申请涉及javascript技术领域，特别是涉及一种javascript拖拽方法和装置。

背景技术

在javascript应用中，经常会有用户需要将某个条目移动位置的拖拽操作需求，在现有的拖拽方案中，拖拽的初始化的时候将拖拽动作绑定到每个容器，保证容器中的每条符合要求的条目可拖拽。在拖拽中遍历每一个容器中每一个可拖拽条目，将每一个条目添加到数组中，将数组中每一个条目的相对位置存放到数组中。当鼠标下落以后，根据鼠标所在的位置，在遍历数组中所有条目，确定目标条目在哪一条数据附近，在根据鼠标松开时，目标条目的具体位置决定在插入到当前条目的前面还是后面。最后再次初始化所有可拖拽条目的位置。

传统的技术方案在拖拽时多次初始化每一个容器中的每一条条目，这样操作的结果是，当拖拽条目的数量很大时，每次都需要遍历所有的条目，运行效果很慢，甚至在部分浏览器中出现警告信息。与此同时，在鼠标松起的时候，也需要遍历每一个条目，这样当条目很多的时候会因为需要逦历太多条目，导致速度变慢。

发明内容

本申请所要解决的技术问题是提供一种javascript拖拽方法可以快速确定拖拽的目标条目以及快速查找到需插入目标条目的位置。

相应的，本申请还提供了针对上述javascript拖拽方法本申请还提供了对应的装置。

为了解决上述问题，本申请公开了一种javascript拖拽方法，包括：

根据用户选择指令获取目标条目；

获取用户释放指令；

根据所述用户释放指令确定鼠标当前所在的目标容器；

获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；

根据所述最近条目位置插入目标条目。

进一步，所述根据用户选择指令获取目标条目前还包括：

当打开页面时，将拖拽事件绑定到每个容器。

进一步，所述根据用户选择指令获取目标条目包括：

根据鼠标按下时所在位置确定目标条目。

进一步，所述根据用户选择指令获取目标条目后还包括：

记录目标条目所在容器中每个条目所在位置；

当鼠标移动时，控制所述目标条目随鼠标移动；

根据目标条目的移动调整容器中每个条目的位置。

进一步，所述根据最近条目位置插入目标条目包括：

根据最近条目位置，按照预置规则插入目标条目；

更新目标条目位置后所有条目位置。

进一步，所述根据最近条目位置插入目标条目后包括：

根据插入目标条目后内所有条目的大小调整目标容器。

进一步，所述获取用户释放指令后包括：

当根据所述用户释放指令无法确定鼠标当前所在的目标容器时，返回目标条目到初始位置。

本申请还提供了一种javascript拖拽装置，包括：

条目获取模块，用于根据用户选择指令获取目标条目；

指令获取模块，用于获取用户释放指令；

查找模块，用于根据所述用户释放指令确定鼠标当前所在的目标容器；

位置确定模块，用于获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；

处理模块，用于根据所述最近条目位置插入目标条目。

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

绑定模块，用于当打开页面时，将拖拽事件绑定到每个容器。

进一步，所述条目获取模块具体用于根据鼠标按下时所在位置确定目标条目。

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

记录模块，用于记录目标条目所在容器中每个条目所在位置；

移动模块，用于当鼠标移动时，控制所述目标条目随鼠标移动；

调整模块，用于根据目标条目的移动调整容器中每个条目的位置。

进一步，所述处理模块包括：

插入模块，用于根据最近条目位置，按照预置规则插入目标条目；

条目调整模块，用于更新目标条目位置后所有条目位置。

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

容器调整模块，用于根据插入目标条目后内所有条目的大小调整目标容器。

进一步，所述处理模块还用于：

当根据所述用户释放指令无法确定鼠标当前所在的目标容器时，返回目标条目到初始位置。

与现有技术相此，本申请包括以下优点：本申请中通过先确定容器位置，再在容器中确定目标条目以及目标条目插入的位置，减少了遍历条目时的数量，减小了计算量，提高了反应速度。