[發明專利]網頁元素拖拽方法和裝置

有效

• 申請號: 201110405826.2
• 申請日: 2011-12-08
• 公開（公告）號: CN103164191B
• 公開（公告）日: 2017-07-11
• 發明（設計）人: 郭大揚
• 申請（專利權）人: 騰訊科技（深圳）有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06F3/0486
• 代理公司: 北京派特恩知識產權代理有限公司11270
• 代理人: 張穎玲,蔣雅潔

技術領域

本發明涉及通信技術領域，特別涉及一種網頁元素拖拽方法和裝置。

背景技術

網頁（Web page）是構成網站的基本元素，是承載各種網站應用的平臺。網頁存放在某一部與互聯網相連的計算機（或服務器）中。

網頁經由URL（Uniform / Universal Resource Locator，統一資源定位符，即網址）來識別與存取，當用戶在瀏覽器輸入網址后，經過一段復雜而又快速的程序，網頁文件會被傳送到用戶所在的計算機，然后再通過瀏覽器解釋網頁的內容，并展示在用戶眼前。

網頁是萬維網（World Wide Web，WWW）中的一“頁”，通常是HTML（Hypertext Markup 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。

另一方面，本發明實施例還提供了一種網絡設備，具體包括：

接收模塊，用于當接收到將待拖拽元素拖拽到當前位置并釋放的操作指令時，獲取當前位置的坐標信息；

確定模塊，用于確定所述接收模塊所獲取的當前位置的坐標信息所對應的坐標點所在的最上層元素；

判斷模塊，用于判斷所述確定模塊所確定的元素是否為容器；