(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210863989.3 (22)申请日 2022.07.21 (71)申请人 四川长虹 教育科技有限公司 地址 621000 四川省绵阳市经开区贾家店 街89号 (72)发明人 何丹培　杨军　罗庆海　罗涛　 胡锦广　 (74)专利代理 机构 成都虹桥专利事务所(普通 合伙) 51124 专利代理师 陈春光 (51)Int.Cl. G06F 9/451(2018.01) G06F 8/38(2018.01) G06F 3/0486(2013.01) (54)发明名称 基于中点距离判断的元 素拖拽匹配方法 (57)摘要 本发明涉及网页元素拖拽技术领域， 公开了 一种基于中点距离判断的元素拖拽匹配方法， 旨 在解决数据兼容困难以及元素拖拽移动性能较 差的问题， 方案主要包括： 在前端基础布局时， 设 置固定区域以及可拖拽区域； 在后台数据建立 时， 针对可拖拽的前端元素建立数据模型； 执行 拖拽移动流程； 在可拖拽区域内， 布局固定位置 的容器元素作为热区容器； 获取热区容器对应的 热区元素， 并将其存储至后台数据中的热区容器 集合内； 在前端元素被拖拽移动的过程中， 基于 中心点距离判断当前拖拽元素的容器与热区容 器集合内的热区元素是否相 交， 若是， 则作出对 应的匹配操作。 本发明解决了数据兼容困难的问 题， 提高了元 素拖拽移动性能。 权利要求书1页 说明书4页 附图1页 CN 115098216 A 2022.09.23 CN 115098216 A 1.基于中点距离判断的元 素拖拽匹配方法， 其特 征在于， 包括以下步骤： 步骤1、 在前端基础布局时， 设置数据与元素位置对应的固定区域、 数据动态变化与元 素位置对应的固定区域以及数据动态变化与元 素位置对应的可拖拽区域； 步骤2、 在后台数据建立时， 针对可拖拽的前端元素建立数据模型， 所述数据模型能够 通过响应式原理修改前端属性的值， 所述前端属性至少包括前端元 素的定位属性； 步骤3、 执行拖拽移动流程： 当前端元素被鼠标指针点击后， 记录鼠标指针的初始位置， 当前端元素移动到当前位置并释放后， 记录鼠标指针的当前位置， 根据所述鼠标指针的初 始位置和当前位置以及前端元素的原始定位属性计算前端 元素的当前定位数据， 并将所述 当前定位数据写入数据模型中， 前端属性 通过数据响应进行位置改变； 步骤4、 在所述可拖拽区域内， 布局固定位置的容器元素作为热区容器， 所述热区容器 的定位属性对应的数据为固定数据； 步骤5、 获取热区容器对应的热区元素， 并将其存储至后台数据中的热区容器集合内， 所述热区容器集 合内设有用于 定位元素的唯一标志； 步骤6、 在前端元素被拖拽移动的过程中， 基于中心点距离判断当前拖拽元素的容器与 热区容器集 合内的热区元 素是否相交， 若是， 则作出对应的匹配操作。 2.如权利要求1所述的基于 中点距离判断的元素拖拽匹配方法， 其特征在于， 所述基于 中心点距离判断当前拖拽元 素的容器与热区容器集 合内的热区元 素是否相交， 具体包括： 确定热区容器集合内所有热区元素对应的第 一中心点坐标和第 一宽高数据， 并将所述 第一中心点坐标和 第一宽高数据存储至热区定位集合， 所述热区定位集合内设有与热区容 器集合相同的唯一标志； 确定当前拖拽元素对应的第 二中心点坐标和第 二宽高数据， 根据 所述唯一标志循环遍 历热区定位集合， 并根据第一中心 点坐标、 第一宽高数据、 第二中心 点坐标和 第二宽高数据 判断当前拖拽元 素的容器与热区容器集 合内的热区元 素是否相交。 3.如权利要求2所述的基于 中点距离判断的元素拖拽匹配方法， 其特征在于， 所述根据 第一中心点坐标、 第一宽高数据、 第二中心点坐标和第二宽高数据判断当前拖拽元素 的容 器与热区容器集 合内的热区元 素是否相交， 具体包括： 若所述第一中心点坐标与第二中心点坐标中的横坐标之差的绝对值小于第一宽高数 据和第二宽高数据中的宽度之和的一半， 并且所述第一中心 点坐标与第二中心 点坐标中的 纵坐标之差的绝对值小于第一宽高数据和 第二宽高数据中的高度之和的一半， 则判定 当前 拖拽元素的容器与热区容器集 合内的热区元 素相交。 4.如权利要求1所述的基于 中点距离判断的元素拖拽匹配方法， 其特征在于， 所述计算 前端元素的当前定位数据的公式为： 前端元素的当前定位数据＝(鼠标指针的当前位置 ‑鼠标指针的初始位置)+前端元素 的原始定位属性。 5.如权利要求1所述的基于 中点距离判断的元素拖拽匹配方法， 其特征在于， 所述步骤 4之前还包括： 判断界面布局是否存在冗余， 若是， 则清理所述冗余。权　利　要　求　书 1/1 页 2 CN 115098216 A 2基于中点距离判断的元素拖 拽匹配方 法 技术领域 [0001]本发明涉及网页元素拖拽技术领域， 具体来说涉及一种基于中点距离判断的元素 拖拽匹配方法。 背景技术 [0002]近年来， 随着教育改革的全面推广和不断深化， 互联 网在教学中的应用愈加 广泛， 教育行业随处可见各种互联网+产品的身影， 授课辅助产品更是百花齐放， 各显神通， 此类 产品中元素操作的交互性优化， 一直是产品设计人员关注的焦点， 然而PC客户端与网页的 拖拽匹配操作一直没有比较成熟、 通用的实现方法， 往往两者需要 各自进行不同平台、 不同 开发语言的逻辑 实现， 伴随着实现方法的不通用， 往往出现不同平台数据兼容复杂等问题。 并且由于元 素操作过程中数据变化频率高， 导 致元素拖拽移动性能较差 。 发明内容 [0003]本发明旨在 提出一种基于中点距离判断的元素拖拽匹配方法， 以解决不同平台元 素拖拽操作与热区实现逻辑不统一， 造成的数据 兼容困难问题， 同时优化了元素拖拽移动 性能， 解决了热区实现逻辑复杂的问题。 [0004]本发明解决上述 技术问题所采用的技 术方案是： [0005]基于中点距离判断的元 素拖拽匹配方法， 包括以下步骤： [0006]步骤1、 在前端基础布局时， 设置数据与元素位置对应 的固定区域、 数据动态变化 与元素位置对应的固定区域以及数据动态变化与元 素位置对应的可拖拽区域； [0007]步骤2、 在后台数据建立时， 针对可拖拽 的前端元素建立数据模型， 所述数据模型 能够通过响应式原理修改前端属性的值， 所述前端属性至少包括前端元 素的定位属性； [0008]步骤3、 执行拖拽移动流程： 当前端元素被鼠标指针点击后， 记录鼠标指针 的初始 位置， 当前端 元素移动到 当前位置并释放后， 记录鼠标指 针的当前位置， 根据所述鼠标指针 的初始位置和当前位置以及前端 元素的原始定位属性计算前端元素的当前定位数据， 并将 所述当前定位数据写入数据模型中， 前端属性 通过数据响应进行位置改变； [0009]步骤4、 在所述可拖拽区域内， 布局固定位置 的容器元素作为热区容器， 所述热区 容器的定位属性对应的数据为固定数据； [0010]步骤5、 获取热区容器对应的热区元素， 并将其存储至后台数据中的热区容器集合 内， 所述热区容器集 合内设有用于 定位元素的唯一标志； [0011]步骤6、 在前端元素被拖拽移动的过程中， 基于中心点距离判断当前拖拽元素的容 器与热区容器集 合内的热区元 素是否相交， 若是， 则作出对应的匹配操作。 [0012]进一步地， 所述基于中心点距离判断当前拖拽元素的容器与热区容器集合内的热 区元素是否相交， 具体包括： [0013]确定热区容器集合内所有热区元素对应的第一中心点坐标和第一宽高数据， 并将 所述第一中心点坐标和 第一宽高数据存储至热区定位集合， 所述热区定位集合内设有与热说　明　书 1/4 页 3 CN 115098216 A 3