文簡(jiǎn)介

點(diǎn)贊 + 關(guān)注 + 收藏=學(xué)會(huì)了

近筆者專注于研究可視化搭建平臺(tái)的解決方案, 分析了很多拖拽組件和頁面動(dòng)態(tài)化技術(shù), 也在 H5-Dooring 項(xiàng)目中做了很多技術(shù)實(shí)現(xiàn), 包括:

• 搭建平臺(tái)的組件設(shè)計(jì)和分類模式
• 拖拽生成頁面方案
• 動(dòng)態(tài)表單編輯器設(shè)計(jì)
• 頁面實(shí)時(shí)預(yù)覽編譯技術(shù)
• 自定義組件和自定義模版方案
• 多人協(xié)作的可視化搭建模式實(shí)現(xiàn)

還有很多技術(shù)細(xì)節(jié)這里不一一舉例了, 最近在研究自由布局時(shí)發(fā)現(xiàn)有這樣一個(gè)需求, 我們可以自由拖拽和縮放組件, 并能從組件的不同緯度拖拽, 如下圖所示:

由于我們的技術(shù)棧采用的是 React, 目前還沒有一個(gè)成熟庫可以同時(shí)支持自由拖拽和縮放, 我們不得不用 react-dragable 和 react-resiable兩個(gè)庫來實(shí)現(xiàn)拖拽和縮放, 但是這樣我們要維護(hù)的數(shù)據(jù)結(jié)構(gòu)就相當(dāng)復(fù)雜了(當(dāng)然vue生態(tài)有成熟的vue-dragable等來支持自由拖拽和縮放), 所以最后筆者決定自己來實(shí)現(xiàn)一個(gè).

我們從可視化搭建平臺(tái)的實(shí)際業(yè)務(wù)出發(fā), 可以分析出拖拽縮放有如下幾個(gè)功能點(diǎn):

• 自由拖拽
• 支持控制點(diǎn), 多方位縮放
• 支持自由控制層級(jí)
• 支持組件靜態(tài)化(即為了實(shí)現(xiàn)固定, 預(yù)覽頁面等效果)
• 拖拽縮放的數(shù)據(jù)能回傳給上層組件并提供受控機(jī)制

實(shí)現(xiàn)以上四點(diǎn)我們就可以實(shí)現(xiàn)一個(gè)可用的拖拽縮放組件. 接下來筆者就來介紹一下實(shí)現(xiàn)的開源拖拽縮放組件rc-drag.

實(shí)現(xiàn)自由拖拽

rc-drag未壓縮的體積只有20多k, 去除注釋核心代碼不到200行, 可以說是一個(gè)非常輕量的拖拽縮放組件庫了, 我們要想讓自己的組件能自由拖拽, 只需要使用如下方式:

1. 安裝

npm i @alex_xu/rc-drag
# 或
yarn add @alex_xu/rc-drag

1. 基本使用

<div id="box" style={{position: 'relative', width: '500px', height: '260px'}}>
  <Drag container="#box" size={[200, 200]}>
    <p>Mr xu</p>
  </Drag>
</div>

我們只需要以上幾行代碼就能實(shí)現(xiàn)組件的自由拖拽. 效果如下:

解決可視化搭建平臺(tái)頁面層級(jí)的問題

目前在 h5-dooring 是通過橫向擴(kuò)展來解決組件層級(jí)和嵌套的問題, 如果我們采用自由拖拽布局, 層級(jí)和嵌套的問題就很好解決了. 在 @alex_xu/rc-drag 這個(gè)庫中筆者實(shí)現(xiàn)設(shè)置層級(jí)的功能, 所以我們可以通過給拖拽組件設(shè)置不同的層級(jí), 來實(shí)現(xiàn)頁面元素疊加和層的概念. 如下設(shè)置:

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

我們通過給組件設(shè)置更高的層級(jí)來實(shí)現(xiàn)組件堆疊的效果.

實(shí)現(xiàn)組件靜態(tài)化

我們往往會(huì)在編輯頁面時(shí)對(duì)組件進(jìn)行拖拽等操作, 但是有些場(chǎng)景我們需要讓組件固定, 比如頭部或者頁腳, 或者鎖定某個(gè)元素, 類似于 PS 里圖層鎖定. 另一個(gè)場(chǎng)景是我們要實(shí)現(xiàn)公共的頁面渲染器, 在編輯狀態(tài)下可以自由拖動(dòng)縮放, 但是在預(yù)覽狀態(tài)下需要讓元素固定, 不能出現(xiàn)自有拖拽等功能, 類似 h5-dooring 那種模式, 這個(gè)時(shí)候我們需要讓拖拽組件@alex_xu/rc-drag支持靜態(tài)化. 這個(gè)時(shí)候我們可以設(shè)置isStatic屬性為true, 如下圖:

代碼如下:

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

我們可以利用這個(gè)屬性, 寫個(gè)頁面渲染器, 用戶在預(yù)覽時(shí)將組件的isStatic設(shè)置為true即可, 源碼的底層實(shí)現(xiàn)其實(shí)也很簡(jiǎn)單, 就是利用react-hoooks的組件編寫方式寫個(gè)判斷即可:

{
   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>
}

實(shí)現(xiàn)組件數(shù)據(jù)上報(bào)

我們都知道組件單純只有拖拽縮放能力遠(yuǎn)遠(yuǎn)不能滿足業(yè)務(wù)需求, 對(duì)于可視化拖拽組件, 更重要的是要能保留拖拽后的數(shù)據(jù), 比如寬高,位置,層級(jí)等數(shù)據(jù), 所以我們需要監(jiān)控幾個(gè)事件, 并將數(shù)據(jù)傳給對(duì)應(yīng)的事件來讓外層能監(jiān)聽和獲取. 這里筆者提供了兩個(gè)拖拽回傳方法: onDrapStart onDrapStop

后面根據(jù)實(shí)際情況可以對(duì)應(yīng)添加. 我們可以在父組件中綁定對(duì)應(yīng)的方法, 如下:

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

這樣我們就能在父層拿到對(duì)應(yīng)的數(shù)據(jù)并保存下來了, 進(jìn)而也就能實(shí)現(xiàn)我們的預(yù)覽頁面的功能了. 具體可以參考H5-Dooring 渲染器的部分.

以上幾個(gè)技術(shù)點(diǎn)和技術(shù)實(shí)現(xiàn)是可視化拖拽組件必備的要素, 大家可以使用參考一下.

github地址: 傳送門

如果大家對(duì)可視化搭建平臺(tái)感興趣, 可以參考 H5-Dooring 相關(guān)的技術(shù)文章來了解更多lowcode和nocode 的知識(shí).

最后

覺得有用 ？喜歡就收藏，順便點(diǎn)個(gè)贊吧，你的支持是我最大的鼓勵(lì)！微信搜 “趣談前端”，發(fā)現(xiàn)更多有趣的H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識(shí)和實(shí)戰(zhàn).

頭線

vue+uni-app+canvas 畫帶箭頭可拖動(dòng)的線段

利用canvas畫板繪制一條帶有箭頭的線段 能夠自由拖拽方向和距離的線段