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

徐小夕 等级 430 0 1

最近笔者专注于研究可视化搭建平台的解决方案, 分析了很多拖拽组件和页面动态化技术, 也在 H5-Dooring 项目中做了很多技术实现, 包括:

  • 搭建平台的组件设计和分类模式
  • 拖拽生成页面方案
  • 动态表单编辑器设计
  • 页面实时预览编译技术
  • 自定义组件和自定义模版方案
  • 多人协作的可视化搭建模式实现

还有很多技术细节这里不一一举例了, 最近在研究自由布局时发现有这样一个需求, 我们可以自由拖拽和缩放组件, 并能从组件的不同纬度拖拽, 如下图所示: 轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

由于我们的技术栈采用的是 React, 目前还没有一个成熟库可以同时支持自由拖拽和缩放, 我们不得不用 react-dragablereact-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>
    我们只需要以上几行代码就能实现组件的自由拖拽. 效果如下: 轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

解决可视化搭建平台页面层级的问题

目前在 h5-dooring 是通过横向扩展来解决组件层级和嵌套的问题, 如果我们采用自由拖拽布局, 层级和嵌套的问题就很好解决了. 在 @alex_xu/rc-drag 这个库中笔者实现设置层级的功能, 所以我们可以通过给拖拽组件设置不同的层级, 来实现页面元素叠加和层的概念. 如下设置:

<Drag container="#box" size={[10, 50]} zIndex={10}>
  <p>Mr xu</p>
</Drag>

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

我们通过给组件设置更高的层级来实现组件堆叠的效果.

实现组件静态化

我们往往会在编辑页面时对组件进行拖拽等操作, 但是有些场景我们需要让组件固定, 比如头部或者页脚, 或者锁定某个元素, 类似于 PS 里图层锁定. 另一个场景是我们要实现公共的页面渲染器, 在编辑状态下可以自由拖动缩放, 但是在预览状态下需要让元素固定, 不能出现自有拖拽等功能, 类似 h5-dooring 那种模式, 这个时候我们需要让拖拽组件@alex_xu/rc-drag支持静态化. 这个时候我们可以设置isStatic属性为true, 如下图: 轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报 代码如下:

<Drag container="#box" isStatic={true}><p>static item</p></Drag>

我们可以利用这个属性, 写个页面渲染器, 用户在预览时将组件的isStatic设置为true即可, 源码的底层实现其实也很简单, 就是利用react-hoooks的组件编写方式写个判断即可:

{
   isStatic ? 
      <div className="x-drag-item" style={style}>{ children }</div>
      :
      <div 
        className="x-drag-item" 
        style={style} 
        onMouseDown={(e) => onMouseDown('move', e)} 
        onMouseUp={onMouseUp} onMouseMove={onMouseMove}
      >
      </div>
}

实现组件数据上报

我们都知道组件单纯只有拖拽缩放能力远远不能满足业务需求, 对于可视化拖拽组件, 更重要的是要能保留拖拽后的数据, 比如宽高,位置,层级等数据, 所以我们需要监控几个事件, 并将数据传给对应的事件来让外层能监听和获取. 这里笔者提供了两个拖拽回传方法:

  • onDrapStart
  • onDrapStop

后面根据实际情况可以对应添加. 我们可以在父组件中绑定对应的方法, 如下:

<Drag 
  container="#box" 
  size={[200, 200]} 
  zIndex={2} 
  onDragStart={(item) => console.log('start', item)} 
  onDragStop={(item) => console.log('stop', item)}
>
  <p>Mr xu</p>
</Drag>

这样我们就能在父层拿到对应的数据并保存下来了, 进而也就能实现我们的预览页面的功能了. 具体可以参考H5-Dooring 渲染器的部分.

以上几个技术点和技术实现是可视化拖拽组件必备的要素, 大家可以使用参考一下. 轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

github地址: 传送门

如果大家对可视化搭建平台感兴趣, 可以参考 H5-Dooring 相关的技术文章来了解更多lowcodenocode 的知识.

最后

觉得有用 ?喜欢就收藏,顺便点个吧,你的支持是我最大的鼓励!微信搜 “趣谈前端”,发现更多有趣的H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战.

收藏
评论区

相关推荐

python多线程原理和详解(一)
python多线程原理和详解 线程概念 1 . 线程是什么? 线程也叫轻量级进程,是操作系统能够进行运算调度的最小单位,它被包涵在进程之中,是进程中的实际运作单位。线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其他线程共享进程所拥有的全部资源。一个线程可以创建和撤销另一个线程,同一个进程中的多个线程之间可以并发执行。
【Golang】Go入门及进阶书籍推荐
Go入门教程全集 链接: https://pan.baidu.com/s/1mWD7DpRa56WXi7WmNaohOg(https://pan.baidu.com/s/1mWD7DpRa56WXi7WmNaohOg) 提取码: ki1e Cloud.Native.Go.pdf C和指针.pdf C面向对象多线程编程.pdf Design Patt
这些 JavaScript函数让你的工作更加 So Easy!
作者: YoussefZidan 译者:前端小智 来源:dev 点赞再看,养成习惯 本文 GitHub https://github.com/qq44924588...(https://github.com/qq449245884/xiaozhi) 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
我的python多线程和多进程
线程存在空闲 from multiprocessing.dummy import Poolfrom multiprocessing.dummy import Pool as ThreadPool pool ThreadPool(20) pool.map(job_worker, result_cursor)
刷屏的拼多多砍一刀、助力、拼团……都和这个数据模型有关!
大家好,我是小五🐶 近几年来,我们会发现微信中充斥着拼多多砍价、天猫叠猫猫、助力、拼团等一系列必须要“用户邀请其他用户一同参与”的活动与信息,见了心烦,却无法屏蔽,有时候还要碍于关系而被迫参与。一旦参与后,你可能会在长期运营手段的影响下,也成为了这些产品的使用者,受各种激励的影响,将上述类似的活动分享给自己的好友。 总之,不管你是否认可这种方式,它们
百度指数 才是 百度 的良心之作!
↑ 点击上方 “凹凸数据” 关注 + 星标  每天更新,干货不断   大家好,我是朱小五前段时间有消息说百度网盘不限速了,大家纷纷表示百度良心了?其实它的良心项目还是有的,比如我们可视化用的Echarts 、做思维导图的百度脑图以及百度指数等。今天我就要“夸一夸”这个百度指数!对了,你想知道最近的股市中“韭菜”有没有进场吗?别退出哈,接着往下看何为百度指
关于根据颜色刷选图像内容的问题
在CSDN本人博文《OpenCVPython图像处理:用inRange刷选图像中指定颜色对象案例》(请点击文章底部最下方的“阅读原文”跳转CSDN阅读原文)中介绍了根据颜色刷选图像内容相关的概念及实现,介绍了通过使用inRange在HSV颜色空间中识别制定颜色的图像内容,文中概要介绍了HSV颜色空间中进行制定颜色对象识别的要点,使用的inRange函数的语法
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
一篇文章带你了解Python的分布式进程接口
一、前言    在Thread和Process中,应当优选Process,因为Process更稳定,而且,Process可以分布到多台机器上,而Thread最多只能分布到同一台机器的多个CPU上。 Python的multiprocessing模块不但支持多进程,其中managers子模块还支持把多进程分布到多台机器上。可以写一个服务进程作为调度者,将任务分
一篇文章带你搞懂Python中的继承和多态
一、继承的介绍继承是一种创建新的类的方式,新创建的叫子类,继承的叫父类、超类、基类。继承的特点就是子类可以使用父类的属性(特征、技能)。继承是类与类之间的关系。继承可以减少代码冗余、提高重用性。在现实生活中,继承一般指的是子女继承父辈的财产,如下图: 二、如何用继承?1.继承语法Class 派生类名(基类名):基类名写在括号里。在继承关系中,已有的,设计好
c++类和继承面试点25连问
本篇文章连问面试时经常会遇到的类和继承相关25个问题,看看你能回答出几道题呀。还是先看一下思维导图,如下: 1. c++的三大特性是什么c++的三大特性,说白了其实就是面向对象的三大特性,是指:封装、继承、多态,简单说明如下: 封装是一种技术,它使类的定义和实现分离,也就是隐藏了实现细节,只留下接口给他人调用,另外封装还有一层意义是它把某种事物具现出属性和方
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
京东面试真题解析,手撕面试官
第1章快速入门1.1 Kafka简介1.2 以Kafka为中心的解决方案1.3 Kafka核心概念1.4 Kafka源码环境 第2章生产者2.1 KafkaProducer 使用示例2.2 KafkaProducer 分析 ProducerInterceptors&cProducerInterceptor Kafka 集群元数据 Serializ