[發明專利]頁面組件拖拽顯示方法、計算機可讀存儲介質及電子裝置

在審

• 申請號: 202111326374.9
• 申請日: 2021-11-10
• 公開（公告）號: CN114115679A
• 公開（公告）日: 2022-03-01
• 發明（設計）人: 陳堃;徐夏琳;趙嘉未;錢文龍;張正彥
• 申請（專利權）人: 蘇州瀚碼智能技術有限公司
• 主分類號: G06F3/0486
• 分類號: G06F3/0486;G06F3/0483;G06F9/451
• 代理公司: 南京艾普利德知識產權代理事務所(特殊普通合伙) 32297
• 代理人: 陸明耀

本發明提供一種頁面組件拖拽顯示方法、計算機可讀存儲介質及電子裝置，所述頁面中具有至少兩個組件，所有組件在被拖拽前均為靜態組件，拖拽任一組件時，所述被拖拽組件為動態組件，判斷所述動態組件的邊和/或中軸是否有與其他靜態組件的邊和/或中軸相靠近，如果有靠近，則將所述動態組件的與其他靜態組件相靠近的邊和/或中軸與所述其他靜態組件相靠近的邊和/或中軸對齊。本發明大大方便了操作者的拖拽操作，提高了效率。

技術領域

本發明涉及計算機技術領域，具體涉及一種頁面組件拖拽顯示方法。

背景技術

隨著瀏覽器功能愈發強大，誕生了許多通過拖拽排列組件的方式完成特定內容布局的網頁應用。但是在拖拽排列對齊組件的過程中，組件之間的相對位置、組件的大小難以精確控制。

發明內容

本發明的目的在于提供一種能夠精確控制的頁面組件拖拽顯示方法。

為實現上述目的，本發明提供一種頁面組件拖拽顯示方法，所述頁面中具有至少兩個組件，所有組件在被拖拽前均為靜態組件，拖拽任一組件時，所述被拖拽組件為動態組件，判斷所述動態組件的邊和/或中軸是否有與其他靜態組件的邊和/或中軸相靠近，如果有靠近，則將所述動態組件的與其他靜態組件相靠近的邊和/或中軸與所述其他靜態組件相靠近的邊和/或中軸對齊。

進一步，所有組件的所有邊和中軸均具有輔助線，當組件為靜態組件時，其所有的輔助線均隱藏，拖拽任一組件時，判斷所述動態組件的邊和/或中軸是否有與其他靜態組件的邊和/或中軸相靠近，如果有靠近，則將所述動態組件的與其他靜態組件相靠近的邊和/或中軸的輔助線與所述其他靜態組件相靠近的邊和/或中軸的輔助線顯示。

進一步，所述邊包括上邊、下邊、左邊、右邊，所述中軸包括橫中軸、豎中軸。

進一步，拖拽任一組件時，先判斷是拖拽任一組件整體移動還是拖拽任一組件的任一邊移動；

當拖拽任一組件整體移動，判斷所述動態組件的任一邊和/或中軸是否有與其他靜態組件的任一邊和/或中軸相靠近，如果有靠近，則將所述動態組件的與其他靜態組件相靠近的邊和/或中軸與所述其他靜態組件相靠近的邊和/或中軸對齊；

當拖拽任一組件的任一邊移動，判斷所述動態組件的移動的邊是否有與其他靜態組件的任一邊和/或中軸相靠近，如果有靠近，則將所述動態組件的移動的邊與所述其他靜態組件相靠近的邊和/或中軸對齊。

進一步，所述判斷所述動態組件的邊和/或中軸是否有與其他靜態組件的邊和/或中軸相靠近，是判斷所述動態組件的各邊和/或中軸的坐標與其他靜態組件的各邊和/或中軸的坐標的差值是否小于設定閥值，如果小于則判定相靠近。

進一步，所述方法還包括：

加載頁面，加載用于組件布局的容器頁以及容器頁內部已存在的所有組件；

緩存組件數據，所述組件數據包括當前頁面所有組件的所有邊的位置和/或中軸的位置。

進一步，所述緩存組件數據之前，先剔除重復數據。

進一步，所述方法還包括：在緩存組件數據之后，初始化輔助線并隱藏，所述輔助線為所有組件的各邊的輔助線和/或中軸的輔助線。

一種計算機可讀存儲介質，存儲有至少一程序，所述至少一程序在被調用時執行并實現如前所述的頁面組件拖拽顯示方法。

一種電子裝置，所述電子裝置包含有如前所述的計算機可讀存儲介質。