【技术实现步骤摘要】
本专利技术涉及前端优化，具体地说是一种基于数据可视化设计器拖拽交互的优化方法、设备及介质。
技术介绍
1、目前，主流的网页设计器的组件库已经很丰富，对组件的渲染和配置的支持也十分成熟，但是在位置选择或布局的操作，普遍使用简单的鼠标拖拽移动位置的方法，没有考虑到用户拖拽带来的操作难度和排版规范性问题，使得绘制过程复杂，整体摆放不齐。
2、可视化设计器的结构一般分为三部分，分别为组件库(echarts图表、form输入表单等展示内容)、画板(组件摆放的区域)、配置栏(修改画布或组件的样式、数据等操作的工具栏)，用户在使用时，通过拖拽或者选择组件库中的组件，放置于画板上进行展示，同时设置其位置，最后在配置栏对组件设置样式、数据等信息。
3、现在的可视化产品，最常见的新增组件的方式，就是通过控制鼠标拖拽组件到画布的操作。web浏览器的拖拽事件，一般是基于javascript提供的dragstart事件作为拖拽触发器，然后用drop作为接收触发器。所以，在组件库的组件上绑定dragstart事件，用当前event对象的da...
【技术保护点】
1.一种基于数据可视化设计器拖拽交互的优化方法，其特征在于，该方法是基于开源技术，结合javascript原生技术，进行二次开发，通过修改底层代码和进一步封装的方式，实现复合型的栅格组件；并在画板边缘区域增加可点击的区域，作为增加辅助线的锚点，实现在画布上增加辅助线；同时基于边线或辅助线自动吸附，实现吸附效果。
2.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，实现复合型的栅格组件具体如下：
3.根据权利要求2所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，vue-draggable是基于文本流的布局方式，对...
【技术特征摘要】
1.一种基于数据可视化设计器拖拽交互的优化方法，其特征在于，该方法是基于开源技术，结合javascript原生技术，进行二次开发，通过修改底层代码和进一步封装的方式，实现复合型的栅格组件；并在画板边缘区域增加可点击的区域，作为增加辅助线的锚点，实现在画布上增加辅助线；同时基于边线或辅助线自动吸附，实现吸附效果。
2.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，实现复合型的栅格组件具体如下：
3.根据权利要求2所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，vue-draggable是基于文本流的布局方式，对内部组件进行自动布局，并支持栅格内组件的位置移动与交换；其中，内部组件包括echarts图表、输入框及图片。
4.根据权利要求2所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，栅格组件的列数配置具体如下：
5.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，对组件摆放相对整齐的设计场景，使用栅格...
【专利技术属性】
技术研发人员：刘兴蒙，陈晏鹏，周双，司衍芹，
申请(专利权)人：浪潮软件股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。