皆さん、こんにちは。Xu Xiaoxiです。これまでローコード可視化とフロントエンドエンジニアリングについてたくさんお話してきました。今日は、人気のオープンソースのドラッグ＆ドロップソートライブラリ10個と、非常に役立つビジュアル構築ソリューション2つをご紹介します。

ビジュアルナビゲーションアドレス: http://wep.turntip.cn/web?id=d1717408910631&uid=wep_251711700015023。

次に、私たちの洞察を共有します。

1. ドラグラ

強力で互換性の高いドラッグ アンド ドロップ ソート ライブラリです。IE7 +と互換性があり、バニラ JavaScript、Angular、React などのフレームワークをサポートします。

「github:」   https://github.com/bevacqua/dragula.

デモアドレス:   https://bevacqua.github.io/dragula/ をご覧ください。

2. インタラクト

「interact.js」  これは、最新のブラウザ向けにドラッグ＆ドロップ、サイズ変更、マルチタッチジェスチャを提供するJavaScriptライブラリです。無料版およびオープンソース版では、慣性やポインタ、制約調整機能といった強力な設定オプションが提供されています。

「interact.js プロ」  オープンソース機能は、より多くのレギュレーター、より洗練された組み込みインタラクション、フレームワーク統合、およびイベントと JS のオーバーヘッドを削減するための高度な開発ツールによって拡張されました。

「github:」   https://github.com/taye/interact.js

デモアドレス:   https://interactjs.io/ をご覧ください。

3. 反応dnd

「リアクトダンジョンズ＆ドラゴンズ」  これは「React」の高階コンポーネントのセットです。使用する際には、対象のコンポーネントを対応する「API」でラップするだけで、要素のドラッグやドラッグされた要素の受け取りといった機能を実現できます。

「github:」   https://github.com/react-dnd/react-dnd.

デモアドレス:   http://react-dnd.github.io/react-dnd をご覧ください。

4. ソート可能

「ソート可能」   — は、最新のブラウザとタッチデバイスでドラッグ＆ドロップリストを並べ替えるためのJavaScriptライブラリです。jQueryは必要ありません。Meteor、AngularJS、React、Polymer、Vue、Ember、Knockout、そしてBootstrapなどのあらゆるCSSライブラリをサポートしています。

「github:」   https://github.com/SortableJS/Sortable.

デモアドレス:   https://sortablejs.github.io/Sortable/ をご覧ください。

5. スクリプト的な

「scriptaculous」は、ウェブサイトのユーザーインターフェースを強化するためのJavaScriptライブラリのセットです。視覚効果エンジン、ドラッグ＆ドロップライブラリ（ソート可能なリストを含む）、様々なコントロール（「Ajax」ベースの動的ドロップダウン、インプレース編集、スライダーなど）などを提供します。

「github:」   https://github.com/madrobby/scriptaculous.

6. リアクトビューティフルDND

美しくポータブルなリストドラッグ＆ドロップライブラリ。Reactにはドラッグ＆ドロップ操作を可能にするライブラリが数多く存在します。中でも注目すべきは、驚異的な「react-dnd」です。これは、HTML5のドラッグ＆ドロップ機能が不安定な状況で特に役立つ、優れたドラッグ＆ドロップ機能群を提供しています。「react-beautiful-dnd」は、縦書きリストと横書きリストに特化した高レベル抽象化機能です。この機能のサブセットとして、「react-beautiful-dnd」は、パワフルで自然、そして美しいドラッグ＆ドロップ体験を提供します。

「github:」   https://github.com/atlassian/react-beautiful-dnd.

デモアドレス:   https://react-beautiful-dnd.netlify.app/

7. リアクトグリッドdnd

エレガントなアニメーション化されたドラッグ アンド ドロップ効果をサポートするグリッド ベースのドラッグ アンド ドロップ ソート ライブラリ。

「github:」   https://github.com/bmcmahen/react-grid-dnd.

デモアドレス:   https://codesandbox.io/embed/gracious-wozniak-kj9w8.

8. dndキット

「dndkit」  プロジェクトを移動するたびに DOM を更新することなく、ドラッグ アンド ドロップ インターフェイスを簡単に構築できます。

「github:」   https://github.com/clauderic/dnd-kit.

デモアドレス:   https://dndkit.com/

9. Reactグリッドレイアウト

「React-Grid-Layout」を使えば、スマートなグリッドレイアウトを備えたドラッグ＆ドロップインターフェースを簡単に構築できます。Reactの動的コンポーネントを使えば、非常に興味深いプラットフォームを構築できます。

「github:」 https://github.com/react-grid-layout/react-grid-layout。

10. ドラッグ可能

優れたアニメーション パフォーマンスを備えたグリッドおよびリストのドラッグ アンド ドロップ ライブラリ。

「github:」 https://github.com/Shopify/draggable

ビジュアルビルディングソリューション

1. H5ドア

H5-Dooring は、H5 用の強力で拡張性に優れたビジュアル ページ構成ソリューションであり、H5 ランディング ページにシンプルで便利、プロフェッショナルで信頼性が高く、無制限のベスト プラクティスを提供することに特化しています。

「github:」   https://github.com/MrXujiang/h5-Dooring.

公式ウェブサイトアドレス：   http://h5.dooring.cn

2. フォーミリ

Reactでは、制御モードでのフォームツリー全体のレンダリングが大きな問題となります。特に相互接続されたデータを扱うシナリオでは顕著で、ページラグが発生しやすくなります。この問題に対処するため、「Formily」は各フォームフィールドの状態を分散管理することで、フォーム操作のパフォーマンスを大幅に向上させます。さらに、「Formily」は「JSON Schema」プロトコルと緊密に統合されているため、バックエンドに起因するフォームレンダリングの問題を迅速に解決できます。

「github:」   https://github.com/alibaba/formily.

公式ウェブサイトアドレス：   https://formilyjs.org/ をご覧ください。

3. V6.ドアリング

すぐに使えるビジュアルダッシュボードソリューション。あらゆるバックエンド言語との統合をサポートし、拡張性と二次開発を可能にします。

公式ウェブサイトアドレス：   http://h5.dooring.cn/docz/source-list/V6.Dooring/v6.