Typescript（TS）

最近一直在使用TS進行開發，Eggjs的Ts實踐也寫了一半。這玩意兒，真的是有毒的，因為能讓你上癮。

隨便將一個項目遷移到TS之上，在強大的靜態類型檢測下，你就能輕松的發現一堆邏輯和邊界錯誤。一番重構之后，頓時感覺代碼神清氣爽，頭皮恢復了生機！

所以，這款組件完全是用Typescript進行開發，使得使用TS的小伙伴來說，更加方便快捷。其次，如果你想使用Javascript開發，也是完全沒有問題的。

造輪子的一些思考

首先，我們的需求是用戶能夠方便的調整后臺dash board的各種表盤位置。

圖片來自：https://github.com/yezihaohao/react-admin

類似一個這樣的界面，我們需要對其里面的組件進行各種各樣的拖動（不得不說一句，他媽的，老子都做好了后臺系統你就用就可以了，拖你妹啊，不讓人好好吃年夜飯。）

那么首先，我們就要考慮幾個點：

• 技術棧是React

• 固定范圍(Container)內的所有掛件不能超出這個范圍。

• 每個掛件可以設定大小，并且按一定的margin上下分割開。

• Container內的所有組件必須不能重疊，還要能自動排序

• 某些組件要可以設定靜態的，也就是固定在那里，不被布局的任何變動而影響。

• 手機也可以操作

動手開始

得益于之前寫過拖拽組件，避開了很多坑，也是寫下這款組件，主要有得特點是：

• React組件

• 自動布局的網格系統

• 手機上也可以操作

• 高度自適應

• 靜態組件(Live Demo(預覽地址))

• 可拖拽的組件(Live Demo(預覽地址))

終于在大年初二早上，弄完了這款組件，基本可以滿足客戶需求，然而還有一些TODO LIST：

• 水平交換模式，目前移動的時候不是

• 用戶動態調整每個掛件的大小，就像Windows窗口一樣

• 掛件拖動把手

• 支持響應式

• 支持ssr，服務器渲染

如何開始？

npm install --save dragact

寫一個例子

//index.js
import * as React from "react";
import * as ReactDOM from "react-dom";

import { Dragact } from 'dragact';
import './index.css'

ReactDOM.render(
    <Dragact
        col={8}
        width={800}
        margin={[5, 5]}
        rowHeight={40}
        className='plant-layout'
    >
        <p key={0} data-set={{ GridX: 0, GridY: 0, w: 4, h: 2 }} className='layout-child'>0</p>
        <p key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className='layout-child'>1</p>
        <p key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className='layout-child'>2</p>
    </Dragact>,
    document.getElementById('root')
);

加點css

.plant-layout {
    border: 1px solid black;
}
.layout-child {
    height: 100%;
    background: #ef4;
    display: flex;
    justify-content: center;
    align-items: center;
}

想要一個新的特色、功能？

如果你想添加一些新功能或者一些非常棒的點子，請發起issue告訴我，謝謝！
如果你已經閱讀過源代碼，并且添加了一些非常牛X

以上就是React拖拽排序組件Dragact詳解的詳細內容，更多請關注php中文網其它相關文章！