(12)发明专利申请
(10)申请公布号(10)申请公布号 CN 104267883 A(43)申请公布日 2015.01.07
(21)申请号 201310341678.1(22)申请日 2013.07.30
(71)申请人深圳市华傲数据技术有限公司
地址518057 广东省深圳市南山区高新区中
区高新中一道9号软件大厦7层713、715、716室(72)发明人黄骁 贾西贝(51)Int.Cl.
G06F 3/0484(2013.01)G06F 9/46(2006.01)
权利要求书2页 说明书6页 附图3页权利要求书2页 说明书6页 附图3页
(54)发明名称
一种javascript拖拽方法和装置(57)摘要
本申请提供了一种javascript拖拽方法，包括：根据用户选择指令获取目标条目；获取用户释放指令；根据所述用户释放指令确定鼠标当前所在的目标容器；获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；根据所述最近条目位置插入目标条目。本发明实施例还提供了对应的装置。本发明实施例通过先确定容器位置，再在容器中确定目标条目以及目标条目插入的位置，减少了遍历条目时的数量，减小了计算量，提高了反应速度。
CN 104267883 ACN 104267883 A
权 利 要 求 书
1/2页
1.一种javascript拖拽方法，其特征在于，包括：根据用户选择指令获取目标条目；获取用户释放指令；
根据所述用户释放指令确定鼠标当前所在的目标容器；获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；根据所述最近条目位置插入目标条目。2.根据权利要求1所述的方法，其特征在于，所述根据用户选择指令获取目标条目前还包括：
当打开页面时，将拖拽事件绑定到每个容器。3.根据权利要求1或2所述的方法，其特征在于，所述根据用户选择指令获取目标条目包括：
根据鼠标按下时所在位置确定目标条目。4.根据权利要求3所述的方法，其特征在于，所述根据用户选择指令获取目标条目后还包括：
记录目标条目所在容器中每个条目所在位置；当鼠标移动时，控制所述目标条目随鼠标移动；根据目标条目的移动调整容器中每个条目的位置。5.根据权利要求1所述的方法，其特征在于，所述根据最近条目位置插入目标条目包括：
根据最近条目位置，按照预置规则插入目标条目；更新目标条目位置后所有条目位置。6.根据权利要求1所述的方法，其特征在于，所述根据最近条目位置插入目标条目后包括：
根据插入目标条目后内所有条目的大小调整目标容器。7.根据权利要求1所述的方法，其特征在于，所述获取用户释放指令后包括：当根据所述用户释放指令无法确定鼠标当前所在的目标容器时，返回目标条目到初始位置。
8.一种javascript拖拽装置，其特征在于，包括：条目获取模块，用于根据用户选择指令获取目标条目；指令获取模块，用于获取用户释放指令；查找模块，用于根据所述用户释放指令确定鼠标当前所在的目标容器；位置确定模块，用于获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；
处理模块，用于根据所述最近条目位置插入目标条目。9.根据权利要求8所述的装置，其特征在于，所述装置还包括：绑定模块，用于当打开页面时，将拖拽事件绑定到每个容器。10.根据权利要求8或9所述的方法，其特征在于，所述条目获取模块具体用于根据鼠标按下时所在位置确定目标条目。
11.根据权利要求10所述的方法，其特征在于，所述装置还包括：
2
CN 104267883 A
权 利 要 求 书
2/2页
记录模块，用于记录目标条目所在容器中每个条目所在位置；移动模块，用于当鼠标移动时，控制所述目标条目随鼠标移动；调整模块，用于根据目标条目的移动调整容器中每个条目的位置。12.根据权利要求8所述的方法，其特征在于，所述处理模块包括：插入模块，用于根据最近条目位置，按照预置规则插入目标条目；条目调整模块，用于更新目标条目位置后所有条目位置。13.根据权利要求8所述的方法，其特征在于，所述装置还包括：容器调整模块，用于根据插入目标条目后内所有条目的大小调整目标容器。14.根据权利要求8所述的方法，其特征在于，所述处理模块还用于：当根据所述用户释放指令无法确定鼠标当前所在的目标容器时，返回目标条目到初始位置。
3
CN 104267883 A
说 明 书
一种javascript拖拽方法和装置
1/6页
技术领域
[0001]
本申请涉及javascript技术领域，特别是涉及一种javascript拖拽方法和装置。
背景技术
在javascript应用中，经常会有用户需要将某个条目移动位置的拖拽操作需求，
在现有的拖拽方案中，拖拽的初始化的时候将拖拽动作绑定到每个容器，保证容器中的每条符合要求的条目可拖拽。在拖拽中遍历每一个容器中每一个可拖拽条目，将每一个条目添加到数组中，将数组中每一个条目的相对位置存放到数组中。当鼠标下落以后，根据鼠标所在的位置，在遍历数组中所有条目，确定目标条目在哪一条数据附近，在根据鼠标松开时，目标条目的具体位置决定在插入到当前条目的前面还是后面。最后再次初始化所有可拖拽条目的位置。
[0003] 传统的技术方案在拖拽时多次初始化每一个容器中的每一条条目，这样操作的结果是，当拖拽条目的数量很大时，每次都需要遍历所有的条目，运行效果很慢，甚至在部分浏览器中出现警告信息。与此同时，在鼠标松起的时候，也需要遍历每一个条目，这样当条目很多的时候会因为需要逦历太多条目，导致速度变慢。
[0002]
发明内容
[0004] 本申请所要解决的技术问题是提供一种javascript拖拽方法可以快速确定拖拽的目标条目以及快速查找到需插入目标条目的位置。[0005] 相应的，本申请还提供了针对上述javascript拖拽方法本申请还提供了对应的装置。
[0006] 为了解决上述问题，本申请公开了一种javascript拖拽方法，包括：[0007] 根据用户选择指令获取目标条目；[0008] 获取用户释放指令；
[0009] 根据所述用户释放指令确定鼠标当前所在的目标容器；[0010] 获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；[0011] 根据所述最近条目位置插入目标条目。[0012] 进一步，所述根据用户选择指令获取目标条目前还包括：[0013] 当打开页面时，将拖拽事件绑定到每个容器。[0014] 进一步，所述根据用户选择指令获取目标条目包括：[0015] 根据鼠标按下时所在位置确定目标条目。[0016] 进一步，所述根据用户选择指令获取目标条目后还包括：[0017] 记录目标条目所在容器中每个条目所在位置；[0018] 当鼠标移动时，控制所述目标条目随鼠标移动；[0019] 根据目标条目的移动调整容器中每个条目的位置。[0020] 进一步，所述根据最近条目位置插入目标条目包括：
4
CN 104267883 A[0021]
说 明 书
2/6页
根据最近条目位置，按照预置规则插入目标条目；
[0022] 更新目标条目位置后所有条目位置。[0023] 进一步，所述根据最近条目位置插入目标条目后包括：[0024] 根据插入目标条目后内所有条目的大小调整目标容器。[0025] 进一步，所述获取用户释放指令后包括：
[0026] 当根据所述用户释放指令无法确定鼠标当前所在的目标容器时，返回目标条目到初始位置。
[0027] 本申请还提供了一种javascript拖拽装置，包括：[0028] 条目获取模块，用于根据用户选择指令获取目标条目；[0029] 指令获取模块，用于获取用户释放指令；[0030] 查找模块，用于根据所述用户释放指令确定鼠标当前所在的目标容器；[0031] 位置确定模块，用于获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；
[0032] 处理模块，用于根据所述最近条目位置插入目标条目。[0033] 进一步，所述装置还包括：[0034] 绑定模块，用于当打开页面时，将拖拽事件绑定到每个容器。[0035] 进一步，所述条目获取模块具体用于根据鼠标按下时所在位置确定目标条目。[0036] 进一步，所述装置还包括：[0037] 记录模块，用于记录目标条目所在容器中每个条目所在位置；[0038] 移动模块，用于当鼠标移动时，控制所述目标条目随鼠标移动；[0039] 调整模块，用于根据目标条目的移动调整容器中每个条目的位置。[0040] 进一步，所述处理模块包括：[0041] 插入模块，用于根据最近条目位置，按照预置规则插入目标条目；[0042] 条目调整模块，用于更新目标条目位置后所有条目位置。[0043] 进一步，所述装置还包括：[0044] 容器调整模块，用于根据插入目标条目后内所有条目的大小调整目标容器。[0045] 进一步，所述处理模块还用于：
[0046] 当根据所述用户释放指令无法确定鼠标当前所在的目标容器时，返回目标条目到初始位置。
[0047] 与现有技术相此，本申请包括以下优点：本申请中通过先确定容器位置，再在容器中确定目标条目以及目标条目插入的位置，减少了遍历条目时的数量，减小了计算量，提高了反应速度。
附图说明
[0048] 图1是本发明一种javascript拖拽方法一实施例的流程示意图；[0049] 图2是本发明一种javascript拖拽方法一实施例中条目查询流程图；[0050] 图3是本发明一种javascript拖拽装置一实施例的结构示意图。具体实施方式
5
CN 104267883 A[0051]
说 明 书
3/6页
为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实
施方式对本申请作进一步详细的说明。[0052] 参照图1，示出了本申请一种javascript拖拽方法，包括：[0053] 步骤S101、根据用户选择指令获取目标条目；[0054] 进一步，如果javascript页面首次被打开时，javascript将拖拽事件绑定到每个容器。拖拽事件绑定到容器上的时候，会给每个条目绑定一个dataIndex，根据dataIndex确定哪些容器中的哪些条目是可以拖拽的。在拖拽前，根据拖拽前的parent()方法可以轻松获取容器，但是获取容器以后需要记录容器中的每一个可拖拽条目的位置，记录在数组中，并初始化每一个可拖拽条目的状态。
[0055] 在初始化页面的时候给每个容器赋予特殊属性，以后拖拽就是根据该属性遍历容器；其中构造完成以后的div曾如下：
[0056]
[0057] 其中，0为可拖拽的索引值。[0058] 在容器中有一个data-listidx，它的值是用来确定容器的标识符，只有拥有该标识符的容器中的选项才能被拖拽。
[0059] 所述根据用户选择指令获取目标条目包括：[0060] 根据鼠标按下时所在位置确定目标条目。[0061] 具体的，当用户需要拖拽某个条目时，用户需要将鼠标移动到该条目上，然后按下鼠标对应按键(可以是鼠标左键)，此时系统认定用户输入了选择指令。当鼠标按键落下以后，根据鼠标的位置，确定离鼠标最近的拖拽项为目标条目。[0062] 进一步，所述根据用户选择指令获取目标条目后还包括：[0063] 记录目标条目所在容器中每个条目所在位置；[0064] 当鼠标移动时，控制所述目标条目随鼠标移动；[0065] 根据目标条目的移动调整容器中每个条目的位置。[0066] 当鼠标按键处于按下状态时，用户移动鼠标则目标条目跟随鼠标移动，且调整容器中其它条目的位置，此如，当目标条目在该容器中位于第二位置，当目标条目随鼠标移动到第三位置时，原第三位置条目移动到第二位置；当目标条目移动到第四位置时，原第三位置条目移动到第二位置，原第四位置条目移动到第三位置。[0067] 步骤S102、获取用户释放指令；当用户移动目标条目到目标位置后，需要将目标条目插入到目标位置时，仅需放开鼠标按键，系统则认定用户输入了释放指令。[0069] 步骤S103、根据所述用户释放指令确定鼠标当前所在的目标容器；
[0070] 确定鼠标当前所在的目标容器的步骤可以采用如下方式(以目标容器为第七个容器为例)：[0071] A、首先本发明实施例中预先设置两个变量：forindex和bacindex，他们之前的初始值都是原始容器的序号；[0072] B、首先判断forindex是否大于容器总数，由于本例中明显不是；[0073] C、从forindex开始循环，向前循环5次，查看每一个容器的位置，判断鼠标是否停在该容器里面，由于本例中是在第七个容器中，所以没有找到目标容器；
[0068]
6
CN 104267883 A[0074]
说 明 书
4/6页
D、Forindex的值加5，这样保证下一次会从当前循环停止点开始循环；
[0075] E、从bacindex开始循环，向后循环5次，查看每一个容器的位置，判断鼠标是否停在该容器里面。
[0076] 本例中没有停在容器里面：[0077] F、Bacindex的值减5，保证下一次循环从当前循环的截止点开始；[0078] G、再次判断forindex是否大于容器总数，本例中任然没有大于容器总数；[0079] H、从上一次得出的forindex开始循环，向前查看每一个容器的位置，当找到第二个容器时，发现鼠标停下的位置在该容器里面，返回该容器的序号。[0080] 步骤S104、获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；
[0081] 获取目标容器序号后，根据目标容器的序号，获取目标容器，初始化目标容器的每一个条目，把目标容器内的每一个条目的位置放在数组中；[0082] 根据数组中记录的每一条目的位置，获取离鼠标停下的位置最近的条目。[0083] 步骤S105、根据所述最近条目位置插入目标条目。[0084] 进一步，本步骤可以根据最近条目位置，按照预置规则插入目标条目；[0085] 更新目标条目位置后所有条目位置。
[0086] 在获取到离鼠标停下释放按键的位置最近的条目，然后根据预置的规则将目标条目插入到该条目之前或者之后。[0087] 进一步，在插入目标条目之后也需要根据插入目标条目后内所有条目的大小调整目标容器。
[0088] 插入目标条目之后，目标容器的大小可能需要调整才能适应当前条目数量，可以根据预置的调整规则对目标容器以及目标条目原本所在容器的大小进行调整。[0089] 进一步，当根据所述用户释放指令无法确定鼠标当前所在的目标容器时，返回目标条目到初始位置。
[0090] 本发明实施例通过先确定容器位置，再在容器中确定目标条目以及目标条目插入的位置，减少了遍历条目时的数量，减小了计算量，提高了反应速度。[0091] 对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
[0092] 如图3所示为本发明一种javascript拖拽装置一实施例的结构示意图，包括：[0093] 条目获取模块301，用于根据用户选择指令获取目标条目；[0094] 指令获取模块302，用于获取用户释放指令；[0095] 查找模块303，用于根据所述用户释放指令确定鼠标当前所在的目标容器；[0096] 位置确定模块304，用于获取所述目标容器中每个条目位置，确定当前鼠标位置最近的条目位置；
[0097] 处理模块305，用于根据所述最近条目位置插入目标条目。[0098] 进一步，所述装置还包括：[0099] 绑定模块306，用于当打开页面时，将拖拽事件绑定到每个容器。[0100] 进一步，所述条目获取模块301具体用于根据鼠标按下时所在位置确定目标条目。
7
CN 104267883 A[0101]
说 明 书
5/6页
进一步，所述装置还包括：
[0102] 记录模块307，用于记录目标条目所在容器中每个条目所在位置；[0103] 移动模块308，用于当鼠标移动时，控制所述目标条目随鼠标移动；[0104] 调整模块309，用于根据目标条目的移动调整容器中每个条目的位置。[0105] 进一步，所述处理模块35包括：[0106] 插入模块3051，用于根据最近条目位置，按照预置规则插入目标条目；[0107] 条目调整模块3052，用于更新目标条目位置后所有条目位置。[0108] 进一步，所述装置还包括：[0109] 容器调整模块310，用于根据插入目标条目后内所有条目的大小调整目标容器。[0110] 进一步，所述处理模块35还用于：
[0111] 当根据所述用户释放指令无法确定鼠标当前所在的目标容器时，返回目标条目到初始位置。
[0112] 如果javascript页面首次被打开时，本发明实施例提供的装置将拖拽事件绑定到每个容器。拖拽事件绑定到容器上的时候，会给每个条目绑定一个dataIndex，根据dataIndex确定哪些容器中的哪些条目是可以拖拽的。在拖拽前，根据拖拽前的parent()方法可以轻松获取容器，但是获取容器以后需要记录容器中的每一个可拖拽条目的位置，记录在数组中，并初始化每一个可拖拽条目的状态。[0113] 当用户移动目标条目到目标位置后，需要将目标条目插入到目标位置时，仅需放开鼠标按键，系统则认定用户输入了释放指令。[0114] 如图2所示，本发明实施例提供的装置确定鼠标当前所在的目标容器的步骤可以采用如下方式(以目标容器为第七个容器为例)：[0115] A、首先本发明实施例中预先设置两个变量：forindex和bacindex，他们之前的初始值都是原始容器的序号；[0116] B、首先判断forindex是否大于容器总数，由于本例中明显不是；[0117] C、从forindex开始循环，向前循环5次，查看每一个容器的位置，判断鼠标是否停在该容器里面，由于本例中是在第七个容器中，所以没有找到目标容器；[0118] D、Forindex的值加5，这样保证下一次会从当前循环停止点开始循环；[0119] E、从bacindex开始循环，向后循环5次，查看每一个容器的位置，判断鼠标是否停在该容器里面。
[0120] 本例中没有停在容器里面：[0121] F、Bacindex的值减5，保证下一次循环从当前循环的截止点开始；[0122] G、再次判断forindex是否大于容器总数，本例中任然没有大于容器总数；[0123] H、从上一次得出的forindex开始循环，向前查看每一个容器的位置，当找到第二个容器时，发现鼠标停下的位置在该容器里面，返回该容器的序号。[0124] 获取目标容器序号后，根据目标容器的序号，获取目标容器，初始化目标容器的每一个条目，把目标容器内的每一个条目的位置放在数组中；[0125] 根据数组中记录的每一条目的位置，获取离鼠标停下的位置最近的条目。[0126] 本发明实施例通过先确定容器位置，再在容器中确定目标条目以及目标条目插入的位置，减少了遍历条目时的数量，减小了计算量，提高了反应速度。
8
CN 104267883 A[0127]
说 明 书
6/6页
以上对本申请所提供的一种javascript拖拽方法和装置，进行了详细介绍，本文
中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。
9
CN 104267883 A
说 明 书 附 图
1/3页
图1
10
CN 104267883 A
说 明 书 附 图
2/3页
图2
11
CN 104267883 A
说 明 书 附 图
3/3页
图3
12
因篇幅问题不能全部显示，请点此查看更多更全内容