基于自然流布局的可視化拖拽搭建平臺設計方案

作者：徐小夕 2022-01-14 07:56:38

開發前端

LowCode 是高效、高性能的拖拽式低代碼開發平臺. 也是筆者最近一直在研究的方向, 對于可視化搭建平臺的實現方案筆者之前寫過很多文章, 這里帶大家探索一個新方向——基于自然流布局的可視化搭建平臺.

在我們之前實現的 h5-dooring 搭建平臺中, 我們采用了網格布局的方式來實現拖拽生成H5頁面或者Web app, 其好處就是靈活簡單, 用戶基本沒有任何使用成本, 在前端層也能做一定的橫向擴展, 但是存在幾個缺陷:

實現嵌套組件比較復雜
沒有層的概念

雖然通過改造可以實現層和嵌套的問題, 最近也在努力往這個方向實現(雖然和設計初衷相駁, dooring的初衷是抹去層和嵌套的概念, 讓搭建扁平化和智能化, 所以沒有采用自由布局的方案)

但是如果一定要實現嵌套和層的功能, 有沒有另一種更簡單的方案呢? 筆者目前想到了兩種解決方案:

將智能布局改為自由布局, 即可以采用類似 react-resizable 的這種方案

基于自然流來實現, 也就是抹去定位的概念, 完全基于元素在文檔的順序, 層級和定位的選擇權交給用戶

因為第一種方案筆者在dooring的早期已經實現過一版, 最后棄用采用了網格布局, 所以說我們來探討一下第二種方案的實現.

基于自然流布局實現拖拽生成頁面

自然流布局的好處就是我們不用通過定位的方式來限定元素的位置等信息, 而是以html文檔流的方式來布局元素, 并且用戶可以靈活的設置元素的層級(layer)和偏移(transform), 接下來我們來看看簡單的實現效果.

1. demo效果

由上圖的demo我們可以發現組件在畫布中的布局完全是默認的文檔流的方式, 所以我們有更靈活的布局實現.

2. 實現思路

具體實現思路主要分以下幾個部分:

組件區拖拽至畫布
畫布區拖拽
組件編輯器和更新機制

第一點和第三點我們在 H5-dooring中已經實現了, 感興趣的可以看我之前的文章, 我們這里重點來實現畫布區拖拽, 也是比較核心的環節.

2.1 H5拖放api基本介紹

拖放(Drag 和 drop)是 HTML5 標準的組成部分, 早已被大多數瀏覽器支持. 我們目前使用的拖放插件基本上基于 H5 拖放 API 來實現的, 其實實現第一點組件區拖拽至畫布我們完全可以用原生來實現, 這里筆者簡單來介紹以下.

首先我們來看看一個完整的拖放過程:

首先要設置一個元素可拖放(比如)
設計拖動的時候會發生什么(需要用到ondragstart事件和 setData(你要傳遞的數據))
放到何處,也就是目標容器(通常在目標容器上綁定ondragover和ondrop事件)

有了以上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" />