本申请提供了一种实现网页内多元素拖动的方法，该方法包括：当检测到鼠标选中多个元素并进行拖动时，创建用于模拟所述多个元素的聚合状态的第一临时元素，并设置所述第一临时元素的当前坐标为拖动前鼠标的当前坐标；在鼠标拖动的过程中，获取鼠标的当前坐标，如果鼠标的当前坐标与所述第一临时元素的当前坐标之间的偏移量超过预设阈值，则将所述第一临时元素的当前坐标设置为鼠标的当前坐标；检测到鼠标拖动结束时，根据鼠标的当前坐标设置所述多个元素的当前坐标，并删除所述第一临时元素。本发明专利技术能够同时支持拖动多个元素，且能够兼容所有主流浏览器。
【技术实现步骤摘要】
【专利摘要】本申请提供了一种实现网页内多元素拖动的方法，该方法包括：当检测到鼠标选中多个元素并进行拖动时，创建用于模拟所述多个元素的聚合状态的第一临时元素，并设置所述第一临时元素的当前坐标为拖动前鼠标的当前坐标；在鼠标拖动的过程中，获取鼠标的当前坐标，如果鼠标的当前坐标与所述第一临时元素的当前坐标之间的偏移量超过预设阈值，则将所述第一临时元素的当前坐标设置为鼠标的当前坐标；检测到鼠标拖动结束时，根据鼠标的当前坐标设置所述多个元素的当前坐标，并删除所述第一临时元素。本专利技术能够同时支持拖动多个元素，且能够兼容所有主流浏览器。【专利说明】一种实现网页内多元素拖动的方法和装置
本申请涉及计算机
，特别涉及一种实现网页内多元素拖动的方法和装置。
技术介绍
目前实现网页内元素拖放的技术方案主要有两种，一种是通过在浏览器系统内置对拖动事件的支持实现网页内元素拖动；另一种是通过HTML5的drag API实现网页内元素拖动。通过在浏览器系统内置对拖动事件的支持实现网页内元素拖动的方案如下:(I)监听鼠标移动(mousemove)事件，当检测到用户在某元素E上按下鼠标左键并移动鼠标时，调用系统内置的drag Drop方法初始化E ；(2)监听拖动开始(dragstart)事件,在E被正式拖动前,对E进行必要的初始化，例如改变E的透明度；(3)监听拖动(drag)事件,对于默认不支持拖动的元素,需获取鼠标当前鼠标的坐标位置(X，y)，并根据该坐标相应设置E的坐标位置；(4)监听拖动结束(dragend)事件,拖动事件结束。通过在浏览器系统内置对拖动事件的支持实现网页内元素拖动的方案，同一时间内只支持拖动一个元素，且仅适用于windows平台特定版本的IE浏览器。通过HTML5的drag API实现网页内元素拖动的方案如下:(I)对于将要拖动的元素F，将其draggable属性设置为true ；(2)监听dragstart事件,在F被正式拖动前,对F进行必要的初始化,例如改变F的透明度；(3)监听drag事件，在F被拖动的过程中，进行必要的处理，例如显示F的坐标；(4)监听dragend事件,拖动事件结束。通过HTML5的drag API实现网页内元素拖动的方案，同一时间内也只支持拖动一个元素，且仅适用于支持HTML5的浏览器，对于低版本浏览器(例如IE9版本以下的IE浏览器)则不支持。
技术实现思路
有鉴于此，本专利技术的目的在于提供一种实现网页内多元素拖动的方法，该方法能够同时支持拖动多个元素，且能够兼容所有主流浏览器。为了达到上述目的，本专利技术提供了一种实现网页内多元素拖动的方法，该方法包括:当检测到鼠标选中多个元素并进行拖动时，创建用于模拟所述多个元素的聚合状态的第一临时元素，并设置所述第一临时元素的当前坐标为拖动前鼠标的当前坐标；在鼠标拖动的过程中，获取鼠标的当前坐标，如果鼠标的当前坐标与所述第一临时元素的当前坐标之间的偏移量超过预设阈值，则将所述第一临时元素的当前坐标设置为鼠标的当前坐标；检测到鼠标拖动结束时，根据鼠标的当前坐标设置所述多个元素的当前坐标，并删除所述第一临时元素。本专利技术还提供了一种实现网页内多元素拖动的装置，该装置包括:检测单元，创建单元，平移单元，删除单元；所述检测单元，用于检测鼠标是否选中了多个元素并进行拖动；用于检测鼠标拖动是否结束；所述创建单元，用于检测单元检测到鼠标选中了多个元素并进行拖动时，创建用于模拟所述多个元素的聚合状态的第一临时元素，并设置所述第一临时元素的当前坐标为拖动前鼠标的当前坐标；所述平移单元，用于在鼠标拖动过程中，获取鼠标的当前坐标，如果鼠标的当前坐标与所述第一临时元素的当前坐标之间的偏移量超过预设阈值，则将所述第一临时元素的当前坐标设置为鼠标的当前坐标；用于检测单元检测到鼠标拖动结束时，根据鼠标的当前坐标设置所述多个元素的当前坐标；所述删除单元，用于检测单元检测到鼠标拖动结束后，删除所述第一临时元素。综上所述，本专利技术中，在多个元素被鼠标选中并进行拖动时，创建用于模拟该多个元素的聚合状态的临时元素，在鼠标拖动过程中根据鼠标的当前坐标对该临时元素的当前坐标进行设置，并在鼠标拖动结束后根据鼠标的当前坐标设置该多个元素的坐标，从而实现同时拖动多个元素，而且该方法不需要依赖系统内置的功能，也不需要依赖于特定的浏览器或脚本语言，因此可以兼容所有主流浏览器。【专利附图】【附图说明】图1是本专利技术实施例实现网页内多元素拖动的方法流程图；图2是本专利技术实施例实现网页内多元素拖动的装置的结构示意图。【具体实施方式】为了使本专利技术的目的、技术方案及优点更加清楚明白，下面结合附图并举实施例，对本专利技术的技术方案进行详细说明。参见图1，图1是本专利技术实施例实现网页内多元素拖动的方法流程图，主要包括以下步骤:步骤101、当检测到鼠标选中多个元素并进行拖动时，创建用于模拟所述多个元素的聚合状态的第一临时元素，并设置所述第一临时元素的当前坐标为拖动前鼠标的当前坐标。这里，可以预先为网页内的每个元素设置一个区别于其它元素的标识(ID)，当该元素被选中时，记录该被选中元素的ID，当网页中的多个元素被鼠标选中并拖动时，可以根据记录的被选中元素的ID确定网页中的哪些元素被选中。当网页中的多个元素被鼠标选中并拖动时，可以模拟被选中的多个元素模的聚合状态，在拖动前鼠标的当前坐标位置处创建一个用于模拟该多个元素的聚合状态的临时元素(本实施例中，称为第一临时元素)，该临时元素的当前坐标与拖动前鼠标的当前坐标相同。本步骤中，创建的第一临时元素的透明度可以稍低于所述多个元素的透明度。步骤102、在鼠标拖动的过程中，获取鼠标的当前坐标，如果鼠标的当前坐标与所述第一临时元素的当前坐标之间的偏移量超过预设阈值，则将所述第一临时元素的当前坐标设置为鼠标的当前坐标。在鼠标拖动的过程中，第一临时元素的坐标位置应随着鼠标的拖动位置变化而变化，使用户能够在视觉上直观感受到被选中元素的拖动过程。为此，本实施例中，需在鼠标拖动过程不断获取鼠标的当前坐标，当鼠标的当前坐标与第一临时元素的当前坐标之间的偏移量超过一个预设阈值时，移动第一临时元素到鼠标的当前坐标位置，通过将第一临时元素的当前坐标设置为鼠标的当前坐标就可以达到移动第一临时元素到鼠标的当前坐标位置的目的。在实际应用中，可以采用以下公式计算拖动过程中鼠标的当前坐标与第一临时元素的当前坐标之间的偏移量:Diff=I yl_y2 | + | xl-x2 |，其中，Diff为鼠标的当前坐标与第一临时元素的当前坐标之间的偏移量，鼠标的当前坐标为(xl，yl)，第一临时元素的当前坐标为(x2，y2), |A-B表示A与B的差值的绝对值。也可以采用其它方法计算拖动过程中鼠标的当前坐标与第一临时元素的当前坐标之间的偏移量，例如，将鼠标的当前坐标与第一临时元素的当前坐标之间的距离作为鼠标的当前坐标与第一临时元素的当前坐标之间的偏移量。步骤103、检测到鼠标拖动结束时，根据鼠标的当前坐标设置所述多个元素的当前坐标，并删除所述第一临时元素。这里，当鼠标被放开时，鼠标拖动结束,此时，鼠标的当前坐标位置也即是被选中和拖动的多个元素需要被拖放的目标位置，因此，可以鼠标拖动结束时鼠标的当前坐标本文档来自技高网...
【技术保护点】
一种实现网页内多元素拖动的方法，其特征在于，该方法包括：当检测到鼠标选中多个元素并进行拖动时，创建用于模拟所述多个元素的聚合状态的第一临时元素，并设置所述第一临时元素的当前坐标为拖动前鼠标的当前坐标；在鼠标拖动的过程中，获取鼠标的当前坐标，如果鼠标的当前坐标与所述第一临时元素的当前坐标之间的偏移量超过预设阈值，则将所述第一临时元素的当前坐标设置为鼠标的当前坐标；检测到鼠标拖动结束时，根据鼠标的当前坐标设置所述多个元素的当前坐标，并删除所述第一临时元素。
【技术特征摘要】
【专利技术属性】
技术研发人员：陈映平，龙丁奋，郭学亨，李晶，吴浩，刘恒兵，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东;44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。