Reactのドラッグ＆ドロップ並べ替えコンポーネントDragactの詳細説明

まず写真を見てみましょう:

Typescript (TS)

私は最近開発に TS を使用しており、Eggjs の Ts 実践の半分を書きました。これは中毒になる可能性があるため、本当に有毒です。

強力な静的型検出により、プロジェクトを自由に TS に移行でき、大量のロジックおよび境界エラーを簡単に見つけることができます。リファクタリングを行った後、コードが突然リフレッシュされ、頭皮が活力を取り戻しました。

そのため、このコンポーネントは完全に Typescript を使用して開発されており、TS を使用する友人にとってより便利で高速になります。次に、Javascript を使用して開発する場合は、まったく問題ありません。

ホイール製作の感想

まず第一に、私たちの要件は、ユーザーが背景のダッシュボード上のさまざまなダイヤルの位置を簡単に調整できることです。

画像: https://github.com/yezihaohao/react-admin

このようなインターフェースと同様に、その内部のコンポーネントに対してさまざまなドラッグを実行する必要があります (私はこう言わなければなりません 一文、くそー、私はすでにバックエンドシステムを準備しているので、あなたはそれを使うだけで大丈夫です、もしあなたが妹を引きずったら、あなたは人々においしい大晦日の夕食を食べさせることはできません)

それで、まず第一に、私たちはそうしなければなりません。いくつかの点を考慮してください:

• テクノロジースタックは React です

• 固定範囲 (コンテナ) 内のすべてのウィジェットはこの範囲を超えることはできません。

• 各ウィジェットのサイズは一定の余裕を持って上下に分割して設定できます。

• コンテナ内のすべてのコンポーネントは重複してはならず、自動的に並べ替えられる必要があります

• 一部のコンポーネントは静的に設定する必要があります。つまり、そこに固定され、レイアウトの変更の影響を受けません。

• 携帯電話も操作できます

始めましょう

以前に書いたドラッグアンドドロップコンポーネントのおかげで、私はこのコンポーネントについても書きましたが、主な機能は次のとおりです。 Reactコンポーネント

• 自動レイアウトグリッドシステム

• 携帯電話でも操作可能

• 適応性が高い

• 静的コンポーネント(ライブデモ(プレビューアドレス))

• ドラッグ可能なコンポーネント(ライブ)デモ (プレビュー アドレス))

• 旧正月 2 日目の朝、ようやくこのコンポーネントが完成しました。これは基本的に顧客のニーズを満たすことができますが、まだいくつかの TODO リストが残っています:

。水平交換モード、現在はモバイルです 時間はありません

• 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;
}

新しい機能が必要ですか?

新しい機能を追加したい場合や、素晴らしいアイデアがある場合は、問題を開いて私に知らせてください。ありがとうございます!

ソースコードを読んで素晴らしい機能を追加した場合

以上がReactのドラッグ＆ドロップ並べ替えコンポーネントDragactの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。