CN103164191B - 网页元素拖拽方法和装置 - Google Patents

网页元素拖拽方法和装置 Download PDF

Info

Publication number
CN103164191B
CN103164191B CN201110405826.2A CN201110405826A CN103164191B CN 103164191 B CN103164191 B CN 103164191B CN 201110405826 A CN201110405826 A CN 201110405826A CN 103164191 B CN103164191 B CN 103164191B
Authority
CN
China
Prior art keywords
container
pulled
superiors
web page
current location
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201110405826.2A
Other languages
English (en)
Other versions
CN103164191A (zh
Inventor
郭大扬
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201110405826.2A priority Critical patent/CN103164191B/zh
Publication of CN103164191A publication Critical patent/CN103164191A/zh
Application granted granted Critical
Publication of CN103164191B publication Critical patent/CN103164191B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本发明实施例公开了一种网页元素拖拽方法和装置,通过应用本发明实施例的技术方案,在网页元素拖拽过程中,根据网页元素拖拽的目标位置的坐标信息,确定当前网页元素所拖拽到的最上层元素,并在该最上层元素或该最上层元素的上级节点为容器时,将该网页元素移动到相应的容器中,完成网页元素的拖拽,从而,避免现有技术中确定位置坐标所对应的所有容器位置和相应参数的复杂计算过程,以及是否存在遮挡的判断过程,通过简单的算法即可实现网页元素的拖拽以及相应容器的确定,提高网页拖拽的处理过程的处理性能和效率。

Description

网页元素拖拽方法和装置
技术领域
本发明涉及通信技术领域,特别涉及一种网页元素拖拽方法和装置。
背景技术
网页(Web page)是构成网站的基本元素,是承载各种网站应用的平台。网页存放在某一部与互联网相连的计算机(或服务器)中。
网页经由URL(Uniform / Universal Resource Locator,统一资源定位符,即网址)来识别与存取,当用户在浏览器输入网址后,经过一段复杂而又快速的程序,网页文件会被传送到用户所在的计算机,然后再通过浏览器解释网页的内容,并展示在用户眼前。
网页是万维网(World Wide Web,WWW)中的一“页”,通常是HTML(HypertextMarkup Language,文本标记语言)格式(文件扩展名为.html或.htm)。网页要透过网页浏览器来阅读。
Dom(Document Object Model,文档对象模型)节点是构成一个网页的元素。DOM是一种抽象的概念,其必须包含一些特性,比如根节点、子节点、以及如何获得这些节点的方法,比如在javascript中,网页作为一个具备DOM特性的文档对象,HTML就是其根节点,访问网页的某个节点可以使用document.getElementById('id属性名称'),如果存在这个节点就返回一个DOM节点, 这个节点有nodeName(节点名称),nodeType(节点类型)等相关的DOM节点属性。
Dom节点的组合形成了网页。而在网页中存放其他元素的元素则被称为“容器”。
在实际的应用中,为了实现用户对于网页的个性化设置,往往需要通过拖拽来对网页中的元素进行操作,从而,满足用户的需求。
在具体的应用场景中,拖拽的目的最终是为了把一个元素移到一个容器中。
拖拽实现的前提是当前存在多于一个的容器,其中,如果存在多个容器,则各容器相互之间互不包含,元素的定位方式为绝对定位(position:absolute)。
在现有的技术方案中,元素拖拽的实现过程如图1所示,在鼠标移动时,计算鼠标本次坐标(A+xoffset,B+yoffset)与上次坐标(A,B)之间的差值,即确定拖拽后坐标与拖拽前坐标的偏移值(xoffset,yoffset),从而,使被拖拽的元素的坐标(x,y)加上对应的同样的差值即可实现拖拽。
在鼠标释放时,获得鼠标的坐标,计算每个可以存放被拖拽元素的容器的绝对位置、高宽和深度(z-index),判断鼠标释放时的鼠标坐标是否落在某个容器所在矩形区域内,且该坐标所属区域不被遮挡,如果是,则将元素移到该容器中。
在实现本发明实施例的过程中,申请人发现现有技术至少存在以下问题:
现有算法要求在判断元素落在哪个容器时必须知道所有容器的位置,大小和深度,而这并不是很容易得到的,特别是深度。
另外,即使得到鼠标本次坐标落在某个容器的矩形区域内,还必须判断鼠标本次坐标所在的区域是否被其他容器遮挡,而这必须通过计算所有容器的矩形区域,并逐个进行判断来完成,计算过程非常复杂,且由于需要遍历进行复杂的计算,会影响相应处理过程的性能和效率。
发明内容
本发明实施例提供一种网页元素拖拽方法和装置,解决在现有技术中网页元素处理过程过于复杂,影响操作性能和效率的问题。
为达到上述目的,本发明实施例一方面提供了一种网页元素拖拽方法,所述方法具体包括:
当接收到将待拖拽元素拖拽到当前位置并释放的操作指令时,获取当前位置的坐标信息;
确定所述当前位置的坐标信息所对应的坐标点所在的最上层元素;
判断所述最上层元素是否为容器;
如果判断结果为是,将所述待拖拽元素移动到所述容器中,如果判断结果为否,则执行步骤A;
步骤A、获取当前判断结果为否的元素的父级元素,然后执行步骤B;
步骤B、判断所述父级元素是否为容器,如果判断结果为是,将所述待拖拽元素移动到所述容器中,如果判断结果为否,则执行步骤A。
另一方面,本发明实施例还提供了一种网络设备,具体包括:
接收模块,用于当接收到将待拖拽元素拖拽到当前位置并释放的操作指令时,获取当前位置的坐标信息;
确定模块,用于确定所述接收模块所获取的当前位置的坐标信息所对应的坐标点所在的最上层元素;
判断模块,用于判断所述确定模块所确定的元素是否为容器;
处理模块,用于在所述判断模块的判断结果为是时,将所述待拖拽元素移动到所述容器中;
其中,所述处理模块还用于在所述判断模块的判断结果为否时,执行步骤A;
步骤A、获取当前判断结果为否的元素的父级元素,然后执行步骤B;
步骤B、通知所述判断模块判断所述父级元素是否为容器,如果判断结果为是,将所述待拖拽元素移动到所述容器中,如果判断结果为否,则执行步骤A。
与现有技术相比,本发明实施例具有以下优点:
通过应用本发明实施例的技术方案,在网页元素拖拽过程中,根据网页元素拖拽的目标位置的坐标信息,确定当前网页元素所拖拽到的最上层元素,并在该最上层元素或该最上层元素的上级节点为容器时,将该网页元素移动到相应的容器中,完成网页元素的拖拽,从而,避免现有技术中确定位置坐标所对应的所有容器位置和相应参数的复杂计算过程,以及是否存在遮挡的判断过程,通过简单的算法即可实现网页元素的拖拽以及相应容器的确定,提高网页拖拽的处理过程的处理性能和效率。
附图说明
图1为现有技术中元素拖拽的实现过程的示意图;
图2为本发明实施例提出的一种网页元素拖拽方法的流程示意图;
图3为本发明实施例提出的一种具体应用场景的示意图;
图4A至4C分别为本发明实施例提出的一种应用网页元素拖拽方法的具体应用场景的示意图;
图5为本发明实施例提出的一种网络设备的结构示意图。
具体实施方式
在现有的技术方案中,现有的网络元素拖拽方案中,需要根据最终的移动位置,按照复杂的算法计算所有可以存放被拖拽元素的容器的绝对位置、高宽和深度信息,还要进行是否被其他容器遮挡的判断,计算过程的复杂影响了相应处理过程的性能和效率。
为了克服这样的缺陷,本发明实施例提出了一种网页元素拖拽方法,充分利用网页自身的结构信息,在网页元素拖拽过程中,根据网页元素拖拽的目标位置的坐标信息确定当前网页元素所拖拽到的最上层元素,并在该最上层元素或该最上层元素的上级节点为容器时,将该网页元素移动到相应的容器中,完成网页元素的拖拽。
如图2所示,为本发明实施例提出的一种网页元素拖拽方法的流程示意图,应用于包括多个查杀引擎的***中,该方法具体包括以下步骤:
步骤S201、当接收到将待拖拽元素拖拽到当前位置并释放的操作指令时,获取当前位置的坐标信息。
在具体的网络元素拖拽过程中,为了方便操作者对位置的判断,可以将待拖拽元素隐藏,从而,不会因为待拖拽元素自身的形状遮挡网页中的其他元素,影响操作者对移动位置的观察和对移动效果的预判,提高了操作的简便性和直观性。
当然,在具体的处理场景中,上述的隐藏处理也可以通过变浅处理或者只显示待拖拽元素的轮廓线的方式,对待拖拽元素所占用的区域进行示意,从而使操作者可以对移动后待拖拽元素所占用的位置进行预判。
在具体的处理场景中,上述的隐藏、变浅或者轮廓显示的方案只是为了达到更好的操作效果而采用的可选操作,是否包括这样的操作并不会影响本发明的保护范围。
需要进一步指出的是,上述的坐标信息是直接以当前网页区域所定义的原点位置为基础所确定的相对位置,具体的原点位置的变化和选取规则并不会影响本发明的保护范围。
步骤S202、确定所述当前位置的坐标信息所对应的坐标点所在的最上层元素。
在具体的处理场景中,本步骤的实现可以通过预设的API(ApplicationProgramming Interface,应用程序接口)来实现。
在实际应用中,API是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
因此,在获取到相应的位置信息后,可以直接通过以下的处理过程确定相应的最上层元素。
首先,获取预设的API,并将所述当前位置的坐标信息输入所述API。
在完成API相应的函数处理过程后,可以直接接收所述API返回的所述当前位置的坐标信息所对应的坐标点所在的最上层元素的信息。
需要指出的是,此时,上述的步骤中所确定的最上层元素是指除去待拖拽元素之外的其他元素中,当前位置的坐标信息所对应的坐标点所位于的最上层的元素,因为待拖拽元素当前正在拖拽过程中,显然位于最上层,如果将其包含在内,显然会影响结果的准确性,当然,具体除去待拖拽元素的方案可以是直接隐藏待拖拽元素,或者在相应的API中定义为在包含待拖拽元素在内各元素中取当前位置的坐标信息所对应的坐标点所位于的次上层元素(待拖拽元素为最上层元素),或者能够达到同样效果的其他方式,在具体的处理场景中,所采用的确定方案的具体内容的变化并不会影响本发明的保护范围。
步骤S203、判断所述最上层元素是否为容器。
如果判断结果为是,则执行步骤S206;
如果判断结果为否,则执行步骤S204。
步骤S204、获取当前判断结果为否的元素的父级元素。
然后,执行步骤S205。
在实际应用中,上述的确定父级元素的具体实现形式,可以为:
通过浏览器脚本javascript,使用Dom节点访问函数判断元素确定当前判断结果为否的元素的父级元素。
由于浏览器脚本javascript和Dom节点访问函数中已经定义了当前网页中各元素的树形结构关系,因此,可以通过相应的操作递推得到相应元素的父级元素。
步骤S205、判断所述父级元素是否为容器。
如果判断结果为是,则执行步骤S206;
如果判断结果为否,则执行步骤S204。
步骤S206、将所述待拖拽元素移动到所述容器中。
通过上述的步骤S204和步骤S205的循环处理,可以在当前元素不是容器的情况下,继续获取更高一级别的元素,直至获取到作为容器的元素。通过这样的递归处理,可以在步骤S202所确定的最上层元素的所有祖先元素中,找到能够作为容器的最低级别的元素,对于当前位置而言,这样的最低级别元素是深度最浅的,显然也不会被其他容器所遮挡,从而,可以避免进行现有技术中的深度计算过程,以及容器是否被遮挡的判断过程,提高了相应处理的性能和效率。
需要进一步指出的是,为了完善相应的处理机制,本发明实施例所提出的技术方案还包含相应的操作回退机制,具体的,在上述的步骤S205中,如果执行判断的所述父级元素具体为浏览器根节点,且判断结果为否,即该浏览器根节点也不是容器时,确定对所述待拖拽元素的拖拽操作失败,并将所述待拖拽元素返回原始位置。
通过这样的操作,可以引入拖拽操作的失败处理机制,保证了拖拽操作的完整性,当然,这只是一种优选的技术方案,是否包括该失败处理机制并不影响本发明的保护范围。
另一方面,需要指出的是,对于上述的步骤S203和步骤S205,判断元素是否为容器的方法,具体包括:
查找当前的所有容器,判断所述元素是否为其中的一个容器。
在实际应用中,由于元素是否为容器可以预先设置,因此,一种具体的方式可以是将所有容器的列表存储在本地,在确定一个待判断的元素后,直接与相应的列表进行比对,确定该元素是否为列表中的某一个元素,如果是,即容器列表中包括该元素,则确定该元素是容器,如果不是,即容器列表中没有包括该元素,则确定该元素不是容器。
与现有技术相比,本发明实施例具有以下优点:
通过应用本发明实施例的技术方案,在网页元素拖拽过程中,根据网页元素拖拽的目标位置的坐标信息,确定当前网页元素所拖拽到的最上层元素,并在该最上层元素或该最上层元素的上级节点为容器时,将该网页元素移动到相应的容器中,完成网页元素的拖拽,从而,避免现有技术中确定位置坐标所对应的所有容器位置和相应参数的复杂计算过程,以及是否存在遮挡的判断过程,通过简单的算法即可实现网页元素的拖拽以及相应容器的确定,提高网页拖拽的处理过程的处理性能和效率。
下面,结合具体的应用场景,对本发明实施例所提出的技术方案进行说明。
为了方便说明,本发明实施例提供了一种具体的应用场景,具体如图3所示,在当前的网页中,存在元素1、元素2、元素3和元素4,其中,元素1为元素3的父级元素,以网页的左上角作为坐标原点,网页中的各位置信息可以通过相对于坐标原点的位置信息进行定义。
当需要对元素4进行拖拽操作(在此情况下,元素4即为前述的待拖拽元素),即从位置A移动到位置B时,首先通过鼠标锁定处于位置A的元素4,然后进行移动,移动到位置B后(此时鼠标指针处于位置C),鼠标对元素4进行释放,此时,获取鼠标此时的位置(位置C)的坐标信息(x,y)。
浏览器提供了一个API:document.elementFromPoint(x,y),其中x,y为上述的鼠标当前的位置的坐标信息,即坐标点相对于浏览器客户端区域所定义的坐标原点的坐标,根据相应的API定义,在对该API输入相应的坐标信息后,该API会输出该坐标点所在的最上层元素,为了避免元素4对输出结果的影响,可以暂时将元素4隐藏,显示出下面的元素,并从中确定最上层的元素(当然,也可以采用步骤S202中所给出的其他方式确定最上层元素)。
如图3所示,位置C的坐标点所处的元素包括元素3、元素1和浏览器根节点,将坐标信息(x,y)作为参数输入该API后,相应的返回值即是坐标点所在的最上层元素(元素3),而不是更下层的元素1或者浏览器根节点。
查找所有的容器,判断元素3是否为某个容器,如果是,则将元素4移动到元素3中,具体如图4A所示,其中,元素4移动后所显示的形状如图中阴影部分所示。此时,元素4所移动到容器为元素3,该元素3的深度是位置C的坐标点所处的各容器中深度最浅的,没有任何其他容器遮挡。
如果元素3不是容器,则获取元素3的父级节点,即元素1。
查找所有的容器,判断元素1是否为为某个容器,如果是,则将元素4移动到元素1中,具体如图4B所示,其中,元素4移动后所显示的形状如图中阴影部分所示。此时,元素4所移动到容器为元素1,该元素1的深度是位置C的坐标点所处的各容器中深度最浅的(元素1是元素3的父级元素,属于包含关系,不进行深度比较),没有任何其他容器遮挡。
如果元素1不是容器,则继续获取元素1的父级节点,即浏览器根节点。
如果浏览器根节点为容器,则将元素4移动到浏览器根节点中,具体如图4C所示,其中,元素4移动后所显示的形状如图中阴影部分所示。此时,元素4所移动到容器为浏览器根节点,该浏览器根节点的深度是位置C的坐标点所处的各容器中深度最浅的(浏览器根节点是元素1的父级节点,而元素1又是元素3的父级元素,均属于包含关系,因此,不进行深度比较),没有任何其他容器遮挡。
在包括如前述的操作回退机制的情况下,如果浏览器节点也不是容器,则直接确定当前的拖拽操作失败,将元素4返回原始位置,即恢复到如图3所示的场景。
上述的各种情况分别说明了在当前的应用场景中,由于具体的各元素是否为容器所导致的处理结果的差异,其中,由于元素2并不是位置C所处的元素,因此,无论元素2是不是容器,都对具体的结果没有影响,
当然,对于具体的应用场景,由于元素的树状结构已经预先定义,所以,上述的父级元素的确定方式可以通过浏览器脚本javascript使用简单的Dom节点访问函数即可实现。
考虑到具体处理过程的简化,本发明实施例提供了上述的在具体的元素不是容器的情况下逐级向上递推确定相应的祖先元素是否为容器(从最初确定的元素3开始,在确定相应的元素不是容器后,逐级向上递推对各级元素的父级元素进行是否为容器的判断),直到找到某个祖先元素为容器或者达到浏览器根节点为止,在程序中,上述的方案可以使用递归算法实现。
当然,如果具体的处理能力比较强大,也可以直接获取元素3的所有祖先元素,并与具体的容器列表相对照,确定元素3及其祖先元素中的所有容器,然后,确定最低级别的元素为元素4所移动到的容器,例如,在元素3和元素1均为容器的情况下,由于元素1是元素3的父级元素,级别更高,所以,确定级别更低的元素3为元素4所移动到的容器。当然,这样的处理方式实际上也是给予更加强大的计算负载的另一种形式的递归算法,与上述的技术方案的思路一致,只是需要消耗更多的处理资源,同样属于本发明的保护范围。
有上述说明可以看出,本技术方案的优势在于在整个实现的过程中,只需通过一次浏览器API的调用,再加上一个简单的递归算法即可实现网页元素的拖拽处理,简单方便,易于运用。
与现有技术相比,本发明实施例具有以下优点:
通过应用本发明实施例的技术方案,在网页元素拖拽过程中,根据网页元素拖拽的目标位置的坐标信息,确定当前网页元素所拖拽到的最上层元素,并在该最上层元素或该最上层元素的上级节点为容器时,将该网页元素移动到相应的容器中,完成网页元素的拖拽,从而,避免现有技术中确定位置坐标所对应的所有容器位置和相应参数的复杂计算过程,以及是否存在遮挡的判断过程,通过简单的算法即可实现网页元素的拖拽以及相应容器的确定,提高网页拖拽的处理过程的处理性能和效率。
为了实现本发明实施例的技术方案,本发明实施例还提供了一种网络设备,具体的结构示意图如图5所示,包括:
接收模块51,用于当接收到将待拖拽元素拖拽到当前位置并释放的操作指令时,获取当前位置的坐标信息;
确定模块52,用于确定所述接收模块51所获取的当前位置的坐标信息所对应的坐标点所在的最上层元素;
判断模块53,用于判断所述确定模块52所确定的元素是否为容器;
处理模块54,用于在所述判断模块53的判断结果为是时,将所述待拖拽元素移动到所述容器中;
其中,所述处理模块54还用于在所述判断模块53的判断结果为否时,执行步骤A;
步骤A、获取当前判断结果为否的元素的父级元素,然后执行步骤B;
步骤B、通知所述判断模块53判断所述父级元素是否为容器,如果判断结果为是,将所述待拖拽元素移动到所述容器中,如果判断结果为否,则执行步骤A。
在具体的处理场景中,所述确定模块52,具体用于:
获取预设的API;
将所述当前位置的坐标信息输入所述API;
接收所述API返回的所述当前位置的坐标信息所对应的坐标点所在的最上层元素的信息。
另一方面,所述处理模块54,具体用于:
通过浏览器脚本javascript,使用Dom节点访问函数确定当前判断结果为否的元素的父级元素。
在实际应用中,所述判断模块53,具体用于:
查找当前的所有容器,判断所述确定模块52所确定的元素或所述处理模块54所获取到的元素是否为其中的一个容器。
需要进一步指出的是,所述判断模块53,还用于:
当进行判断的元素具体为浏览器根节点,且所述浏览器根节点不是容器时,确定对所述待拖拽元素的拖拽操作失败,通知所述处理模块54将所述待拖拽元素返回原始位置。
与现有技术相比,本发明实施例具有以下优点:
通过应用本发明实施例的技术方案,在网页元素拖拽过程中,根据网页元素拖拽的目标位置的坐标信息,确定当前网页元素所拖拽到的最上层元素,并在该最上层元素或该最上层元素的上级节点为容器时,将该网页元素移动到相应的容器中,完成网页元素的拖拽,从而,避免现有技术中确定位置坐标所对应的所有容器位置和相应参数的复杂计算过程,以及是否存在遮挡的判断过程,通过简单的算法即可实现网页元素的拖拽以及相应容器的确定,提高网页拖拽的处理过程的处理性能和效率。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到本发明实施例可以通过硬件实现,也可以借助软件加必要的通用硬件平台的方式来实现。基于这样的理解,本发明实施例的技术方案可以以软件产品的形式体现出来,该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM,U盘,移动硬盘等)中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或网络设备等)执行本发明实施例各个实施场景所述的方法。
本领域技术人员可以理解附图只是一个优选实施场景的示意图,附图中的模块或流程并不一定是实施本发明实施例所必须的。
本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中,也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块,也可以进一步拆分成多个子模块。
上述本发明实施例序号仅仅为了描述,不代表实施场景的优劣。
以上公开的仅为本发明实施例的几个具体实施场景,但是,本发明实施例并非局限于此,任何本领域的技术人员能思之的变化都应落入本发明实施例的业务限制范围。

Claims (10)

1.一种网页元素拖拽方法,其特征在于,所述方法具体包括:
当接收到将待拖拽元素拖拽到当前位置并释放的操作指令时,获取当前位置的坐标信息;所述坐标信息是以当前网页区域所定义的原点位置为基础所确定的相对位置;
确定所述当前位置的坐标信息所对应的坐标点所在的最上层元素;所述最上层元素为除去待拖拽元素之外的其他元素中,当前位置的坐标信息所对应的坐标点所位于的最上层的元素;
判断所述最上层元素是否为容器;
如果判断结果为是,将所述待拖拽元素移动到所述容器中,如果判断结果为否,则执行步骤A;
步骤A、获取当前判断结果为否的元素的父级元素,然后执行步骤B;
步骤B、判断所述父级元素是否为容器,如果判断结果为是,将所述待拖拽元素移动到所述容器中,如果判断结果为否,则执行步骤A。
2.如权利要求1所述的方法,其特征在于,所述确定所述当前位置的坐标信息所对应的坐标点所在的最上层元素,具体包括:
获取预设的应用程序接口API;
将所述当前位置的坐标信息输入所述API;
接收所述API返回的所述当前位置的坐标信息所对应的坐标点所在的最上层元素的信息。
3.如权利要求1所述的方法,其特征在于,所述获取当前判断结果为否的元素的父级元素,具体包括:
通过浏览器脚本javascript,使用文档对象模型Dom节点访问函数确定当前判断结果为否的元素的父级元素。
4.如权利要求1所述的方法,其特征在于,判断元素是否为容器的方法,具体包括:
查找当前的所有容器,判断所述元素是否为其中的一个容器。
5.如权利要求1所述的方法,其特征在于,在判断元素是否为容器的过程中,还包括:
当相应的元素具体为浏览器根节点,且所述浏览器根节点不是容器时,确定对所述待拖拽元素的拖拽操作失败,将所述待拖拽元素返回原始位置。
6.一种网络设备,其特征在于,具体包括:
接收模块,用于当接收到将待拖拽元素拖拽到当前位置并释放的操作指令时,获取当前位置的坐标信息;所述坐标信息是以当前网页区域所定义的原点位置为基础所确定的相对位置;
确定模块,用于确定所述接收模块所获取的当前位置的坐标信息所对应的坐标点所在的最上层元素;所述最上层元素为除去待拖拽元素之外的其他元素中,当前位置的坐标信息所对应的坐标点所位于的最上层的元素;
判断模块,用于判断所述确定模块所确定的元素是否为容器;
处理模块,用于在所述判断模块的判断结果为是时,将所述待拖拽元素移动到所述容器中;
其中,所述处理模块还用于在所述判断模块的判断结果为否时,执行步骤A;
步骤A、获取当前判断结果为否的元素的父级元素,然后执行步骤B;
步骤B、通知所述判断模块判断所述父级元素是否为容器,如果判断结果为是,将所述待拖拽元素移动到所述容器中,如果判断结果为否,则执行步骤A。
7.如权利要求6所述的网络设备,其特征在于,所述确定模块,具体用于:
获取预设的API;
将所述当前位置的坐标信息输入所述API;
接收所述API返回的所述当前位置的坐标信息所对应的坐标点所在的最上层元素的信息。
8.如权利要求6所述的网络设备,其特征在于,所述处理模块,具体用于:
通过浏览器脚本javascript,使用Dom节点访问函数确定当前判断结果为否的元素的父级元素。
9.如权利要求6所述的网络设备,其特征在于,所述判断模块,具体用于:
查找当前的所有容器,判断所述确定模块所确定的元素或所述处理模块所获取到的元素是否为其中的一个容器。
10.如权利要求6所述的网络设备,其特征在于,所述判断模块,还用于:
当进行判断的元素具体为浏览器根节点,且所述浏览器根节点不是容器时,确定对所述待拖拽元素的拖拽操作失败,通知所述处理模块将所述待拖拽元素返回原始位置。
CN201110405826.2A 2011-12-08 2011-12-08 网页元素拖拽方法和装置 Active CN103164191B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201110405826.2A CN103164191B (zh) 2011-12-08 2011-12-08 网页元素拖拽方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201110405826.2A CN103164191B (zh) 2011-12-08 2011-12-08 网页元素拖拽方法和装置

Publications (2)

Publication Number Publication Date
CN103164191A CN103164191A (zh) 2013-06-19
CN103164191B true CN103164191B (zh) 2017-07-11

Family

ID=48587316

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201110405826.2A Active CN103164191B (zh) 2011-12-08 2011-12-08 网页元素拖拽方法和装置

Country Status (1)

Country Link
CN (1) CN103164191B (zh)

Families Citing this family (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103885712B (zh) * 2014-03-21 2017-08-15 小米科技有限责任公司 网页调整方法、装置及电子设备
CN105743869A (zh) * 2014-12-12 2016-07-06 阿里巴巴集团控股有限公司 Csrf攻击防范方法、网站服务器及浏览器
CN106648282B (zh) * 2015-10-30 2021-05-14 北京国双科技有限公司 网页中指标的处理方法和装置
CN106528730B (zh) * 2016-10-27 2020-01-21 中企动力科技股份有限公司 网页中组件设计方法及装置
CN106528135A (zh) * 2016-10-27 2017-03-22 中企动力科技股份有限公司 一种网页中目标组件的确定方法及装置
CN106775651B (zh) * 2016-11-25 2020-10-09 广州酷狗计算机科技有限公司 网页元素移位方法及装置
CN106648319B (zh) * 2016-12-19 2020-04-07 广州视源电子科技股份有限公司 一种用于思维导图的操作方法和装置
CN109213409A (zh) * 2017-07-01 2019-01-15 武汉斗鱼网络科技有限公司 网页中拖拽组件定位方法、存储介质、电子设备及***
CN109782983B (zh) * 2017-11-13 2021-05-25 腾讯科技(深圳)有限公司 应用程序界面的视图布局调整方法和装置
CN109739501A (zh) * 2018-12-18 2019-05-10 北京字节跳动网络技术有限公司 在绝对定位布局中实现流式效果的方法、装置及电子设备
CN112965645B (zh) * 2021-03-15 2022-07-29 中国平安财产保险股份有限公司 页面拖拽方法、装置、计算机设备及存储介质
CN115220628B (zh) * 2022-06-14 2023-12-15 深圳市优必选科技股份有限公司 元素拖拽方法、装置、电子设备及存储介质
CN115098216B (zh) * 2022-07-21 2024-04-23 四川长虹教育科技有限公司 基于中点距离判断的元素拖拽匹配方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1760841A (zh) * 2004-10-15 2006-04-19 微软公司 使用户界面元素可见的***和方法
CN101261642A (zh) * 2008-04-10 2008-09-10 深圳市迅雷网络技术有限公司 一种调整互联网页面布局的方法及装置
CN101546329A (zh) * 2009-05-07 2009-09-30 山东中创软件商用中间件股份有限公司 支持用户自定制的实时网站状态监控技术

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1760841A (zh) * 2004-10-15 2006-04-19 微软公司 使用户界面元素可见的***和方法
CN101261642A (zh) * 2008-04-10 2008-09-10 深圳市迅雷网络技术有限公司 一种调整互联网页面布局的方法及装置
CN101546329A (zh) * 2009-05-07 2009-09-30 山东中创软件商用中间件股份有限公司 支持用户自定制的实时网站状态监控技术

Also Published As

Publication number Publication date
CN103164191A (zh) 2013-06-19

Similar Documents

Publication Publication Date Title
CN103164191B (zh) 网页元素拖拽方法和装置
CN103678631B (zh) 页面渲染方法及装置
CN103389895B (zh) 一种前端页面的生成方法及***
US10762282B2 (en) Content rendering
CN106776939A (zh) 一种图像无损标注方法及***
CN102884526B (zh) 在应用窗口中显示项目
US20120110453A1 (en) Display of Image Search Results
US20160092566A1 (en) Clustering repetitive structure of asynchronous web application content
EP2089795A1 (en) Declarative definition enabling graphical designer reuse
CN106874247A (zh) 一种报表生成方法及装置
CN109670101B (zh) 爬虫调度方法、装置、电子设备及存储介质
CN105302876A (zh) 基于正则表达式的url过滤方法
CN104809751B (zh) 生成事件组演化图的方法和装置
CN110309386B (zh) 一种网页爬取的方法和装置
CN107392316B (zh) 网络训练方法、装置、计算设备及计算机存储介质
WO2015009188A1 (en) Systems and methods for automated generation of graphical user interfaces
CN109271145A (zh) 基于pythonQT及智能算法的快速规则定制方法
CN110399063B (zh) 页面元素属性的查看方法及装置
CN103077174A (zh) 一种并发的资源更新方法与设备
CN113722572B (zh) 一种分布式深度爬取的方法、装置及介质
CN106649315A (zh) 处理路径导航的方法和装置
CN107784054B (zh) 一种页面发布方法和装置
CN115525321A (zh) 分布式任务生成方法、装置、设备及存储介质
US10055095B2 (en) Customizable autocomplete option
CN105528370B (zh) 页面检测方法及客户端

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant