皆さん、こんにちは。徐暁熙です。これまで「ローコード可視化」と「フロントエンドエンジニアリング」についてたくさんお話ししてきました。今日も引き続き、人気の高いオープンソースの「ドラッグ＆ドロップソート」ライブラリを「8つ」と、非常に価値のある「ビジュアル構築」ソリューションを「2つ」ご紹介します。

1. ドラグラ

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

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

デモアドレス: https://bevacqua.github.io/dragula/

2. インタラクト

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

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

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

デモアドレス: https://interactjs.io/

3. 反応dnd

「React DnD」は「React」の高階コンポーネントのセットです。使用するには、対象のコンポーネントを対応する「API」でラップするだけで、要素のドラッグやドラッグされた要素の受け取りなどの機能を実現できます。

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

デモアドレス: http://react-dnd.github.io/react-dnd

4. ソート可能

「Sortable」は、最新のブラウザやタッチデバイスでドラッグ＆ドロップリストを並べ替えるための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

デモURL: 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/

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

1. H5ドア

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

「github:」 https://github.com/MrXijiang/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

「技術共有:」 http://lowcode.dooring.cn/product/detail?fid=_UKqJCZEBb