轻松教你解决组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报
发布时间：2021-06-04 12:23:00 所属栏目：大数据 来源：互联网
导读：在 H5-Dooring 项目中做了很多技术实现, 包括: 搭建平台的组件设计和分类模式 拖拽生成页面方案 动态表单编辑器设计 页面实时预览编译技术 自定义组件和自定义模版方案 多人协作的可视化搭建模式实现 还有很多技术细节这里不一一举例了, 最近在研究自由布局
|
在 H5-Dooring 项目中做了很多技术实现, 包括:
搭建平台的组件设计和分类模式
拖拽生成页面方案
动态表单编辑器设计
页面实时预览编译技术
自定义组件和自定义模版方案
多人协作的可视化搭建模式实现
还有很多技术细节这里不一一举例了, 最近在研究自由布局时发现有这样一个需求, 我们可以自由拖拽和缩放组件, 并能从组件的不同纬度拖拽, 如下图所示:
图片
由于我们的技术栈采用的是 React, 目前还没有一个成熟库可以同时支持自由拖拽和缩放, 我们不得不用 react-dragable 和 react-resiable两个库来实现拖拽和缩放, 但是这样我们要维护的数据结构就相当复杂了(当然vue生态有成熟的vue-dragable等来支持自由拖拽和缩放), 所以最后笔者决定自己来实现一个.
我们从可视化搭建平台的实际业务出发, 可以分析出拖拽缩放有如下几个功能点:
自由拖拽
支持控制点, 多方位缩放
支持自由控制层级
支持组件静态化(即为了实现固定, 预览页面等效果)
拖拽缩放的数据能回传给上层组件并提供受控机制
实现以上四点我们就可以实现一个可用的拖拽缩放组件. 接下来笔者就来介绍一下实现的开源拖拽缩放组件rc-drag.
实现自由拖拽
rc-drag未压缩的体积只有20多k, 去除注释核心代码不到200行, 可以说是一个非常轻量的拖拽缩放组件库了, 我们要想让自己的组件能自由拖拽, 只需要使用如下方式:
1.安装
npm i @alex_xu/rc-drag
# 或
yarn add @alex_xu/rc-drag
2.基本使用
<div id="box" style={{position: 'relative', width: '500px', height: '260px'}}>
<Drag container="#box" size={[200, 200]}>
<p>Mr xu</p>
</Drag>
</div>
我们只需要以上几行代码就能实现组件的自由拖拽
 （编辑：衡阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
