React造輪子：拖拽排序組件「Dragact」

先來一張圖看看：

項目地址：Github地址 (無恥求星！）

在線觀看（第一次加載須要等幾秒）：預覽地址

提及來不容易，人在國外沒有過年一說，可是畢竟也是中國年，雖然不放假，可是家裏總會主內一頓豐盛的年夜飯。

說吧，人家在上班，我在家裏過年，那確定就不一樣步了。

不一樣步會發生什麼？

拖拽組件

大概三四個月之前，我寫了一篇《「實戰」React實現的拖拽組件》，只不過，這個組件比較基礎，僅僅支持電腦端的使用，並且不能支持拖拽排序，顯然不是很符合要求。

也嘗試找了幾款組件，想改吧改吧就上了，可是一些組件都蠻老的了，仍是jQ的，不是很符合咱們的技術棧。

想一想仍是算了，本身造一個輪子吧，反正我那麼愛造輪子，順手寫一個也無所謂。

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'
    >
        <div key={0} data-set={{ GridX: 0, GridY: 0, w: 4, h: 2 }} className='layout-child'>0</div>
        <div key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className='layout-child'>1</div>
        <div key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className='layout-child'>2</div>
    </Dragact>,
    document.getElementById('root')
);

加點css

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

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

若是你想添加一些新功能或者一些很是棒的點子，請發起issue告訴我，謝謝！
若是你已經閱讀過源代碼，而且添加了一些很是牛X?的點子，請發起你的PR.

有bug?

若是你發現了本項目的Bug，請務必立刻告訴我。添加一個issue，而且幫忙給出最最簡單重現的例子，這能讓我快速定位到Bug幫你解決，謝謝！

最後

這是2018年的第二個輪子了。

造輪子訓練的能力固然不是隻有把輪子從新寫一遍的能力，還有一個很重要的因素就是：心態。

爲何我說的是心態呢？我舉一個生活中的例子，你去新買一臺iPhone，假設之前根本沒有用過iPhone，買到手的時候，確定會當心翼翼的去使用其中的功能，基本上就是這個不敢設置，另一個不敢設置，這個不敢按，那個不敢碰。可是隨着時間久了，你熟悉了iPhone，每一個角落都被你玩透了，你就不在意了，隨便玩，隨便調，厲害的刷機越獄改主題。

這就是心態的變化，應用到編程之中也是如此。剛開始的時候，你拿到別人框架來用，很是的不熟練，跟着做者寫的案例，設置成功，解決了你的問題，你就不敢再碰那一段代碼了。隨後，新的需求來了，你必需要在原有的基礎上加新功能，然而做者這時候由於某些緣由再也不維護那個軟件了，你要麼找新的，要麼就是深刻看代碼。

剛開始的時候，你可能只是調整框架代碼裏面的參數，隨着愈來愈的需求，你改的愈來愈多，這個框架你開始熟悉，逐漸逐漸的，你就壓根不怕需求來了，由於你太熟悉了。

這個過程至關的漫長，聰明的人幾個月，比較笨的人或者懶惰的人，可能10年。爲了快速得到這種心態的轉變，你要作的就是「造輪子」。這是一個最快的辦法，也是最土最笨的辦法，可是確實是一個「必須有效的辦法」。