轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

也在 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> 

本文转载自网络，原文链接：https://mp.weixin.qq.com/s/QV_sqMCm5zhpQWhA-9-YUw
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！