基于自然流布局的可视化拖拽搭建平台设计方案

徐小夕 等级 817 0 0

LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.

在我们之前实现的 h5-dooring 搭建平台中, 我们采用了网格布局的方式来实现拖拽生成H5页面或者Web app, 其好处就是灵活简单, 用户基本没有任何使用成本, 在前端层也能做一定的横向扩展, 但是存在几个缺陷:

  • 实现嵌套组件比较复杂
  • 没有层的概念

虽然通过改造可以实现层和嵌套的问题, 最近也在努力往这个方向实现(虽然和设计初衷相驳, dooring的初衷是抹去层和嵌套的概念, 让搭建扁平化和智能化, 所以没有采用自由布局的方案) 基于自然流布局的可视化拖拽搭建平台设计方案

但是如果一定要实现嵌套和层的功能, 有没有另一种更简单的方案呢? 笔者目前想到了两种解决方案:

  • 将智能布局改为自由布局, 即可以采用类似 react-resizable 的这种方案
  • 基于自然流来实现, 也就是抹去定位的概念, 完全基于元素在文档的顺序, 层级和定位的选择权交给用户

因为第一种方案笔者在dooring的早期已经实现过一版, 最后弃用采用了网格布局, 所以说我们来探讨一下第二种方案的实现.

基于自然流布局实现拖拽生成页面

自然流布局的好处就是我们不用通过定位的方式来限定元素的位置等信息, 而是以html文档流的方式来布局元素, 并且用户可以灵活的设置元素的层级(layer)和偏移(transform), 接下来我们来看看简单的实现效果.

1. demo效果

基于自然流布局的可视化拖拽搭建平台设计方案 基于自然流布局的可视化拖拽搭建平台设计方案 由上图的demo我们可以发现组件在画布中的布局完全是默认的文档流的方式, 所以我们有更灵活的布局实现.

2. 实现思路

具体实现思路主要分以下几个部分:

  • 组件区拖拽至画布
  • 画布区拖拽
  • 组件编辑器和更新机制

第一点和第三点我们在 H5-dooring中已经实现了, 感兴趣的可以看我之前的文章, 我们这里重点来实现画布区拖拽, 也是比较核心的环节.

2.1 H5拖放api基本介绍

拖放(Dragdrop)是 HTML5 标准的组成部分, 早已被大多数浏览器支持. 我们目前使用的拖放插件基本上基于 H5 拖放 API 来实现的, 其实实现第一点组件区拖拽至画布我们完全可以用原生来实现, 这里笔者简单来介绍以下.

首先我们来看看一个完整的拖放过程:

  1. 首先要设置一个元素可拖放(比如<img draggable="true" />)
  2. 设计拖动的时候会发生什么(需要用到ondragstart事件 和 setData(你要传递的数据))
  3. 放到何处,也就是目标容器(通常在目标容器上绑定ondragoverondrop事件)

有了以上3个步骤, 我们就能实现第一点的需求, 笔者写个简单demo来给大家参考一下:

<script type="text/javascript">
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
  }

  function drop(ev){
    ev.preventDefault();
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
</script>

<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag" src="dooring.png" draggable="true" ondragstart="drag(event)" width="336" height="69" />

也就是对应的我们的组件拖放区域, 如下图所示: 基于自然流布局的可视化拖拽搭建平台设计方案

2.2 画布区拖拽布局实现

因为之前的版本我们采用了网格布局来实现智能拖拽, 由于内部定位机制采用的是绝对定位(absolute), 所以是实现层级和固定组件比较困难, 如果组件的呈现完全脱离了定位的束缚, 我们就可以实现以上的困境了. 所以这里我们调研了一种方案——拖拽排序机制.

自然流布局的规律就是默认情况下html页面是基于dom出现的顺序来排列的, 也就是我们说的堆叠. 基于自然流布局的可视化拖拽搭建平台设计方案

我们可以遵循这样的设计, 通过排序的方式改变组件的位置从而实现自然流布局的页面搭建.

那么我们再回到上面说的布局问题, 比如说要想实现栅格化布局, 我们只需要定义一个flex容器, 将组件拖拽到容器里就好了, 这样也就解决了嵌套的问题. 同时我们还可以设计嵌套容器的栅格数, 这样就可以实现类似如下的效果:

基于自然流布局的可视化拖拽搭建平台设计方案

拖拽排序的库我们可以使用:

  • sortable
  • Vue.Draggable
  • react-dnd

还有很多优秀的库, 这里就不一一举例了.

3. 如何实现层级和嵌套

其实在上面的实现思路中我们已经解决了嵌套的问题了, 即提供拖放的容器组件, 利用笔者在上文中介绍的拖放api即可实现. 对于组件层级来说, 因为我们采用的是自然流布局, 所以我们可以轻松的设置元素的定位属性, 比如我们提供一个定位的设置: 基于自然流布局的可视化拖拽搭建平台设计方案

关于如何设计一个动态的属性编辑器, 笔者之前文章中也就详细的介绍, 大家可以参考:

以上就是自然流布局的基本实现方式, 后续笔者也会在github上同步我们最新的成果.

H5-Dooring编辑器wiki: https://github.com/MrXujiang/h5-Dooring/wiki

最后

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

收藏
评论区

相关推荐

js的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。 此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。 函数防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才
go每日一库 [go-rate] 速率限制器
关于我gorate是速率限制器库,基于 Token Bucket(令牌桶)算法实现。 gorate被用在生产中 用于遵守GitHub API速率限制。速率限制可以完成一些特殊的功能需求,包括但不限于服务器端垃圾邮件保护、防止api调用饱和等。 库使用说明 构造限流器我们首先构造一个限流器对象:golimiter : NewLimi
流畅的pythonPDF高清版
提取码:1028内容简介 · · · · · ·【技术大咖推荐】“很荣幸担任这本优秀图书的技术审校。这本书能帮助很多中级Python程序员掌握这门语言,我也从中学到了相当多的知识!”——Alex Martelli,Python软件基金会成员“对于想要扩充知识的中级和高级Python程序员来说,这本书是充满了实用编程技巧的宝藏。”——Daniel Greenf
小记面试题-2021
CSS类 1.解释浮动及其工作原理浮动的元素可以向左或者向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度。虽然浮动的元素已不在文档流中, 但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现的就像浮动元素不存在一样,下面的元素会填补原来的位置。有些
面试避坑手册之 Java字节流和字符流总结IO流!
从接收输入值说起在日常的开发应用中,有时候需要直接接收外部设备如键盘等的输入值,而对于这种数据的接收方式,我们一般有三种方法:字节流读取,字符流读取,Scanner 工具类读取。 字节流读取直接看一个例子:cpublic class Demo01SystemIn public static void main(String[] args) throw
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
GIT的使用流程
GIT的使用流程 1 github注册流程 1 进入github官网:https://github.com/ 2 注册一个自己的github账号 3 右上角选择New repository 4 进入create a new repository 选择你的仓库名填入: Repository name
Java 流行的工作流引擎
**Java** **流行的工作流引擎** ### **JBPM 工作流** JBPM 是一个Java业务流程管理系统,是JBoss中一款开源的工作流引擎,是一个轻量级的,使用BPMN 2规范可扩展的 工作流引擎,也是一个工作流管理系统,它可以运行在任何java环境,嵌入在您的应用程序或服务,拥有工作流控制台管理界面,现在, 最新的版本为JBPM
Java8中的流操作
> **为获得更好的阅读体验,请访问原文:[传送门](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.wmyskxz.com%2F2019%2F08%2F03%2Fjava8-liu-cao-zuo-ji-ben-shi-yong-xing-neng-ce-shi%2F)** ![
TS流 PS流 ES流
IP数据报有首部和数据两部分组成的,首部的前一部分是固定长度20字节,是所有IP数据报必须具有的。首部包括:总长度、标识、MF、DF、片偏移。   数字信号实际传送的是数据流,一般数据流包括以下三种: ES流:也叫基本码流,包含视频、音频或数据的连续码流。 PES流:也叫打包的基本码流,是将基本的码流ES流根据需要分成长度不等的数据包,并加上包
java字节流与字符流的区别
https://mp.weixin.qq.com/s?\_\_biz=MzI4Njc5NjM1NQ==&mid=2247484777&idx=1&sn=a18c01bc4de826464fe8337e7ff6f87a&scene=19#wechat\_redirect 字节流与和字符流的使用非常相似,两者除了操作代码上的
Activiti的流程配置
在使用activiti做流程引擎的时候,某些节点的执行人是固定的,但是有些节点的执行人不是固定的,为了进一步的简化用户操作,我们可以将固定执行人的任务节点预先配置好,这样在启动流程的时候用户配置的节点就会进一步的得到简化。 废话不多说,数据库的表结构如下: ![](https://static.oschina.net/uploads/space/2016
JVM的启动流程
JVM工作原理和特点主要是指操作系统装入JVM,是通过jdk中Java.exe来完成,通过下面4步来完成JVM环境. 1.创建JVM装载环境和配置 2.装载JVM.dll 3.初始化JVM.dll并挂界到JNIENV(JNI调用接口)实例 4.调用JNIEnv实例装载并处理class类。 ![](https://oscimg.oschina.net
SpringBoot项目的限流
开发访问量比较大的系统是,爬虫的目的就是解决访问量大的问题;缓存穿透是为了保护后端数据库查询服务;计数服务解决了接近真实访问量以及数据库服务的压力。 **架构图** ======= ![](https://oscimg.oschina.net/oscnet/c6239218a4445e605e95620cb79979d7f89.png) **限流**
SpringBoot项目的限流
开发访问量比较大的系统是,爬虫的目的就是解决访问量大的问题;缓存穿透是为了保护后端数据库查询服务;计数服务解决了接近真实访问量以及数据库服务的压力。 **架构图** ======= ![](https://oscimg.oschina.net/oscnet/c6239218a4445e605e95620cb79979d7f89.png) **限流**