组件拖拽方法、装置、计算机设备和存储介质制造方法及图纸

本发明专利技术涉及一种组件拖拽方法、装置、计算机设备和存储介质，组件拖拽方法包括：对网页文档绑定鼠标事件监听；监听到鼠标按下时，获取所点击的节点且查找节点所在的组件的属性；在查找到组件的属性时，从属性中读取组件的数据源中的索引且设为激活组件，在该索引的后一个位置添加占位组件的数据且更新数据源；监听到鼠标移动时，计算鼠标位置的偏移量，根据偏移量及方向移动占位组件在数据源中的位置且更新数据源；监听到鼠标释放时，将激活组件的数据移动到占位组件的索引上且更新数据源，数据源每次更新时实时刷新网页文档从而完成组件拖拽。根据本发明专利技术，拖拽处理高聚合，无需分散在各组件上，且将拖拽事件与业务解耦，容易后续开发维护。续开发维护。续开发维护。

【技术实现步骤摘要】
组件拖拽方法、装置、计算机设备和存储介质


[0001]本申请涉及面向文档基于数据的拖拽组件领域，特别是涉及一种组件拖拽方法、装置、计算机设备和存储介质。

技术介绍

[0002]iframe是html中的一种内嵌框架，用于在网页里内置另一个网页，例如在博客中内嵌微博页面，可以直接在内嵌的微博页面上点赞和分享，是一种很常见的框架。iframe可以设定宽度、高度、外框参数、卷轴参数。
[0003]低代码平台开发涉及编辑、预览功能。编辑功能需要实时显示组件渲染情况。预览功能需要模拟页面真实加载情况。基于此，经常使用iframe框架作为渲染器。
[0004]编辑功能区域使用iframe框架作为渲染器，需要支持组件拖拽。预览功能中的iframe框架只需要嵌入真实组件渲染，无需拖拽。在现有技术中，一般采用的方案是在真实组件上绑定拖拽事件。但是这种方案会存在以下技术问题：真实组件可以有很多个，如果每个组件都绑定拖拽事件，不仅属于重复工作，难以维护。而且对于预览功能而言，这些事件监听都是冗余代码，降低了系统效率。
[0005]由此可见，能本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种组件拖拽方法，面向网页文档，其特征在于，包括以下步骤：完成数据源的页面渲染从而生成网页文档，数据源为包含多个组件列表的数据，组件列表中列举多个组件，进行页面渲染时，对组件设置特定属性，特定属性的属性值设为当前组件在数据源中的索引；对网页文档绑定鼠标事件监听，鼠标事件包括：鼠标按下、鼠标移动、鼠标释放；监听到鼠标按下时，获取所点击的节点且查找节点所在的组件的属性；在查找到组件的特定属性时，从特定属性中读取组件的数据源中的索引，根据索引更新数据源对应索引位置的组件数据，为该组件数据添加激活属性，表明该组件为激活组件，且在该索引的后一个位置添加占位组件的数据且更新数据源；监听到鼠标移动时，计算鼠标位置的偏移量，根据偏移量及方向移动占位组件在数据源中的位置且更新数据源；监听到鼠标释放时，将激活组件的数据移动到占位组件的索引上且更新数据源，数据源每次更新时实时刷新网页文档从而完成组件拖拽。2.根据权利要求1所述的组件拖拽方法，其特征在于，进行页面渲染时，对组件设置拖拽属性，用来标识该组件为可拖拽组件，查找节点所在的组件的属性时，如果没有查找到组件的属性则查找该节点的父节点，直到查找到组件的属性。3.根据权利要求2所述的组件拖拽方法，其特征在于，如果没有查找到组件的属性且该节点没有父节点，则节点所在的组件不可拖拽。4.根据权利要求1所述的组件拖拽方法，其特征在于，鼠标位置的偏移量为鼠标移动之后的位置与鼠标点击时的位置。5.根据权利要求1所述的组件拖拽方法，其特征在于，在根据偏移量及方向移动占位组件在数据源中的位置时，计算偏移量与激活组件的高度倍数，将占位组件的索...

【专利技术属性】
技术研发人员：许琼琼，
申请(专利权)人：上海数禾信息科技有限公司，
类型：发明
国别省市：