基于中點距離判斷的元素拖拽匹配方法組成比例

本發明專利技術涉及網頁元素拖拽技術領域，公開了一種基于中點距離判斷的元素拖拽匹配方法，旨在解決數據兼容困難以及元素拖拽移動性能較差的問題，方案主要包括：在前端基礎布局時，設置固定區域以及可拖拽區域；在后臺數據建立時，針對可拖拽的前端元素建立數據模型；執行拖拽移動流程；在可拖拽區域內，布局固定位置的容器元素作為熱區容器；獲取熱區容器對應的熱區元素，并將其存儲至后臺數據中的熱區容器集合內；在前端元素被拖拽移動的過程中，基于中心點距離判斷當前拖拽元素的容器與熱區容器集合內的熱區元素是否相交，若是，則作出對應的匹配操作。本發明專利技術解決了數據兼容困難的問題，提高了元素拖拽移動性能。提高了元素拖拽移動性能。提高了元素拖拽移動性能。

【技術實現步驟摘要】
基于中點距離判斷的元素拖拽匹配方法


[0001]本專利技術涉及網頁元素拖拽
，具體來說涉及一種基于中點距離判斷的元素拖拽匹配方法。

技術介紹

[0002]近年來，隨著教育改革的全面推廣和不斷深化，互聯網在教學中的應用愈加廣泛，教育行業隨處可見各種互聯網+產品的身影，授課輔助產品更是百花齊放，各顯神通，此類產品中元素操作的交互性優化，一直是產品設計人員關注的焦點，然而PC客戶端與網頁的拖拽匹配操作一直沒有比較成熟、通用的實現方法，往往兩者需要各自進行不同平臺、不同開發語言的邏輯實現，伴隨著實現方法的不通用，往往出現不同平臺數據兼容復雜等問題。并且由于元素操作過程中數據變化頻率高，導致元素拖拽移動性能較差。

技術實現思路

[0003]本專利技術旨在提出一種基于中點距離判斷的元素拖拽匹配方法，以解決不同平臺元素拖拽操作與熱區實現邏輯不統一，造成的數據兼容困難問題，同時優化了元素拖拽移動性能，解決了熱區實現邏輯復雜的問題。
[0004]本專利技術解決上述技術問題所采用的技術方案是：
[0005]基于中點距離判斷的元素拖拽匹配方法，包括以下步驟：
[0006]步驟1、在前端基礎布局時，設置數據與元素位置對應的固定區域、數據動態變化與元素位置對應的固定區域以及數據動態變化與元素位置對應的可拖拽區域；
[0007]步驟2、在后臺數據建立時，針對可拖拽的前端元素建立數據模型，所述數據模型能夠通過響應式原理修改前端屬性的值，所述前端屬性至少包括前端元素的定位屬性；
[0008]步驟3、執行拖拽移動流程：當前端元素被鼠標指針點擊后，記錄鼠標指針的初始位置，當前端元素移動到當前位置并釋放后，記錄鼠標指針的當前位置，根據所述鼠標指針的初始位置和當前位置以及前端元素的原始定位屬性計算前端元素的當前定位數據，并將所述當前定位數據寫入數據模型中，前端屬性通過數據響應進行位置改變；
[0009]步驟4、在所述可拖拽區域內，布局固定位置的容器元素作為熱區容器，所述熱區容器的定位屬性對應的數據為固定數據；
[0010]步驟5、獲取熱區容器對應的熱區元素，并將其存儲至后臺數據中的熱區容器集合內，所述熱區容器集合內設有用于定位元素的唯一標志；
[0011]步驟6、在前端元素被拖拽移動的過程中，基于中心點距離判斷當前拖拽元素的容器與熱區容器集合內的熱區元素是否相交，若是，則作出對應的匹配操作。
[0012]進一步地，所述基于中心點距離判斷當前拖拽元素的容器與熱區容器集合內的熱區元素是否相交，具體包括：
[0013]確定熱區容器集合內所有熱區元素對應的第一中心點坐標和第一寬高數據，并將所述第一中心點坐標和第一寬高數據存儲至熱區定位集合，所述熱區定位集合內設有與熱
區容器集合相同的唯一標志；
[0014]確定當前拖拽元素對應的第二中心點坐標和第二寬高數據，根據所述唯一標志循環遍歷熱區定位集合，并根據第一中心點坐標、第一寬高數據、第二中心點坐標和第二寬高數據判斷當前拖拽元素的容器與熱區容器集合內的熱區元素是否相交。
[0015]進一步地，所述根據第一中心點坐標、第一寬高數據、第二中心點坐標和第二寬高數據判斷當前拖拽元素的容器與熱區容器集合內的熱區元素是否相交，具體包括：
[0016]若所述第一中心點坐標與第二中心點坐標中的橫坐標之差的絕對值小于第一寬高數據和第二寬高數據中的寬度之和的一半，并且所述第一中心點坐標與第二中心點坐標中的縱坐標之差的絕對值小于第一寬高數據和第二寬高數據中的高度之和的一半，則判定當前拖拽元素的容器與熱區容器集合內的熱區元素相交。
[0017]進一步地，所述計算前端元素的當前定位數據的公式為：
[0018]前端元素的當前定位數據＝(鼠標指針的當前位置
?
鼠標指針的初始位置)+前端元素的原始定位屬性。
[0019]進一步地，所述步驟4之前還包括：
[0020]判斷界面布局是否存在冗余，若是，則清理所述冗余。
[0021]本專利技術的有益效果是：本專利技術所述的基于中點距離判斷的元素拖拽匹配方法，通過特定的布局，無需使用固定的元素容器也能實現元素的位移。并且通過中間數據的轉換降低界面刷新率，提高了元素移動性能。同時本專利技術基于中點距離判斷元素是否觸及熱區，有效解決了不同平臺元素拖拽操作與熱區實現邏輯不統一，造成的數據兼容困難問題。
附圖說明
[0022]圖1為本專利技術實施例所述的基于中點距離判斷的元素拖拽匹配方法的流程示意圖。
具體實施方式
[0023]下面將結合附圖對本專利技術的實施方式進行詳細描述。
[0024]本專利技術提供的基于中點距離判斷的元素拖拽匹配方法，包含前端界面基礎布局，后臺數據建立，拖拽邏輯實現，特定區域的設置，熱區邏輯實現，特殊操作實現等部分。如圖1所示，主要包括以下步驟：
[0025]步驟1、在前端基礎布局時，設置數據與元素位置對應的固定區域、數據動態變化與元素位置對應的固定區域以及數據動態變化與元素位置對應的可拖拽區域；
[0026]本實施例在可拖拽區域布局時，容器設置為內部元素通過坐標進行定位，坐標原點為該容器的左上角頂點。
[0027]步驟2、在后臺數據建立時，針對可拖拽的前端元素建立數據模型，所述數據模型能夠通過響應式原理修改前端屬性的值，所述前端屬性至少包括前端元素的定位屬性；
[0028]本實施例中，定位屬性還包括前端元素對應的寬、高、坐標點等信息。通過元素定位改變前端元素的位移，定位屬性對應的數據通過數據響應式原理與后臺的數據模型綁定，當后臺重置數據為初始狀態時，元素將實現復位。
[0029]隨著數據響應式理念在各個平臺越來越深入的應用，基于該理念的優秀框架發展
迅速，如網頁端的vue.js與react.js框架，PC客戶端的WPF框架均是基于MVVM架構模式的響應式框架，統一理念與架構模式在不同平臺的應用，使通用的元素操作邏輯成為可實現的解決方案。本實施例基于數據響應式原理對前端屬性進行修改，有效解決了不同平臺元素拖拽操作與熱區實現邏輯不統一，造成的數據兼容困難問題。
[0030]步驟3、執行拖拽移動流程：當前端元素被鼠標指針點擊后，記錄鼠標指針的初始位置，當前端元素移動到當前位置并釋放后，記錄鼠標指針的當前位置，根據所述鼠標指針的初始位置和當前位置以及前端元素的原始定位屬性計算前端元素的當前定位數據，并將所述當前定位數據寫入數據模型中，前端屬性通過數據響應進行位置改變；
[0031]本實施例在執行拖拽移動流程時，基于元素模型的類型，設置對應的temp屬性，并通過temp屬性記錄鼠標指針的當前位置。其中所述鼠標指針的初始位置和當前位置以及前端元素的原始定位屬性計算前端元素的當前定位數據的公式如下：
[0032]前端元素的當前定位數據＝(鼠標指針的當前位置
?
鼠標指針的初始位置)+前端元素的原始定位屬性。
[0033]本實施例中，為了便于執行下一次本文檔來自技高網...

【技術保護點】

【技術特征摘要】
1.基于中點距離判斷的元素拖拽匹配方法，其特征在于，包括以下步驟：步驟1、在前端基礎布局時，設置數據與元素位置對應的固定區域、數據動態變化與元素位置對應的固定區域以及數據動態變化與元素位置對應的可拖拽區域；步驟2、在后臺數據建立時，針對可拖拽的前端元素建立數據模型，所述數據模型能夠通過響應式原理修改前端屬性的值，所述前端屬性至少包括前端元素的定位屬性；步驟3、執行拖拽移動流程：當前端元素被鼠標指針點擊后，記錄鼠標指針的初始位置，當前端元素移動到當前位置并釋放后，記錄鼠標指針的當前位置，根據所述鼠標指針的初始位置和當前位置以及前端元素的原始定位屬性計算前端元素的當前定位數據，并將所述當前定位數據寫入數據模型中，前端屬性通過數據響應進行位置改變；步驟4、在所述可拖拽區域內，布局固定位置的容器元素作為熱區容器，所述熱區容器的定位屬性對應的數據為固定數據；步驟5、獲取熱區容器對應的熱區元素，并將其存儲至后臺數據中的熱區容器集合內，所述熱區容器集合內設有用于定位元素的唯一標志；步驟6、在前端元素被拖拽移動的過程中，基于中心點距離判斷當前拖拽元素的容器與熱區容器集合內的熱區元素是否相交，若是，則作出對應的匹配操作。2.如權利要求1所述的基于中點距離判斷的元素拖拽匹配方法，其特征在于，所述基于中心點距離判斷當前拖拽元素的容器與熱區容器集合內的熱區元素是否相交，具體包括：確定熱區容器集合內所有熱區元素對應的...

【專利技術屬性】
技術研發人員：何丹培，楊軍，羅慶海，羅濤，胡錦廣，
申請(專利權)人：四川長虹教育科技有限公司，
類型：發明
國別省市：