首頁 > web前端 > js教程 > 主體

React拖曳排序組件Dragact詳解

小云云
發布: 2018-02-22 13:26:09
原創
6366 人瀏覽過

先來一張圖來看看:

React拖曳排序組件Dragact詳解

Typescript(TS)

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

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

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

造輪子的一些思考

首先,我們的需求是使用者能夠方便的調整後台dash board的各種錶盤位置。

React拖曳排序組件Dragact詳解
圖片來自:https://github.com/yezihaohao/react-admin

類似一個這樣的介面,我們需要對其裡面的組件進行各種各樣的拖動(不得不說一句,他媽的,老子都做好了後台系統你就用就可以了,拖你妹啊,不讓人好好吃年夜飯。 #固定範圍(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=&#39;plant-layout&#39;
        >
            <p key={0} data-set={{ GridX: 0, GridY: 0, w: 4, h: 2 }} className=&#39;layout-child&#39;>0</p>
            <p key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className=&#39;layout-child&#39;>1</p>
            <p key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className=&#39;layout-child&#39;>2</p>
        </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

    以上是React拖曳排序組件Dragact詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板