react-beautiful-dndを選ぶ理由react-dnd と比較すると、react-beautiful-dnd はリスト間のドラッグに適しており、モバイル端末をサポートし、使いやすいです。 基本的な使い方基本概念
使い方ドラッグアンドドロップを可能にするコードをDragDropContextに記述します。 'react-beautiful-dnd' から {DragDropContext} をインポートします。 クラスAppはReact.Componentを拡張します。 ドラッグ開始時 = () => { /*...*/ }; onDragUpdate = () => { /*...*/ } ドラッグ終了時 = () => { // 唯一必要なのは }; 与える() { 戻る ( <ドラッグドロップコンテキスト onDragStart={this.onDragStart} onDragUpdate={this.onDragUpdate} onDragEnd={this.onDragEnd} > <div>こんにちは世界</div> </ドラッグドロップコンテキスト> ); } } ドロップ可能な領域を決定する 'react-beautiful-dnd' から { DragDropContext, Droppable } をインポートします。 クラスAppはReact.Componentを拡張します。 // ... 与える() { 戻る ( <ドラッグドロップコンテキスト onDragStart={this.onDragStart} onDragUpdate={this.onDragUpdate} onDragEnd={this.onDragEnd} > <ドロップ可能 droppableId="droppable-1"> {(提供、スナップショット) => ( <div ref={provided.innerRef} style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }} {...提供されたドロップ可能なプロパティ} > <h2>私は落とされる存在です!</h2> {提供されたプレースホルダー} </div> )} </ドロップ可能> </ドラッグドロップコンテキスト> ); } }
Draggableを使用して、ドラッグ要素をドロップ可能領域にラップします。 'react-beautiful-dnd' から { DragDropContext、Droppable、Draggable } をインポートします。 クラスAppはReact.Componentを拡張します。 // ... 与える() { 戻る ( <ドラッグドロップコンテキスト onDragStart={this.onDragStart} onDragUpdate={this.onDragUpdate} onDragEnd={this.onDragEnd} > <ドロップ可能 droppableId="droppable-1"> {(提供、スナップショット) => ( <div ref={provided.innerRef} style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }} {...提供されたドロップ可能なプロパティ} > <ドラッグ可能 draggableId="draggable-1" index={0}> {(提供、スナップショット) => ( <div ref={provided.innerRef} {...提供されるドラッグ可能なプロパティ} {...提供されるdragHandleProps} > <h4>ドラッグ可能なもの</h4> </div> )} </ドラッグ可能> {提供されたプレースホルダー} </div> )} </ドロップ可能> </ドラッグドロップコンテキスト> ); } }
ドラッグが終了したら、ソースデータを変更します onDragEnd = 結果 => { const { ソース、 宛先、 ドラッグ可能な ID } = 結果; if (!destination) { 戻る; } // ソース配列とターゲット配列を変更し、ドラッグした要素をソース配列から削除して、ターゲット配列に挿入します this.setState({ xxx: xxx、 }); } 使用中に発生した問題ドラッグターゲット領域にカスタムプレースホルダーを追加する react-beautiful-dnd がターゲット領域にドラッグされると、現在のドラッグ要素に対して、ターゲット領域内の要素間にスペースが自動的に確保されます。このスペースの距離は、ターゲット領域内のドラッグ可能な要素のサイズです (ただし、要素のマージンは含まれません。これも落とし穴です。解決策については後述します)。 したがって、この距離内で絶対配置を使用し、カスタム プレースホルダーを追加できます。具体的なアプローチ: 現在のカスタム プレースホルダー要素の左と上の距離を計算し、dragUpdate イベントでこの 2 つの距離を更新します。beatiful-dnd-custom-placeholder-demo を参照してください。 ドラッグ時に、ドラッグされた要素の変換プロパティを変更すると、ドラッグがどこかで停止し、ドラッグされた要素が間違った位置に配置されます。 公式ドキュメントには、ドラッグ可能な要素は position: fixed 配置を使用するが、transform の影響を受けるという大まかな説明があります。
次の解決策が提供されています: createPortal を使用して、ドラッグ要素を空の親要素に掛けます。問題を参照してください: 親の変換によりドラッグの配置が混乱します しかし、この方法では問題は解決されません。カスタム プレースホルダーがまだ必要だからです。ドラッグ時には、プレースホルダーの左距離も計算する必要があり、これは、現在ドラッグされている要素の parentNode の下にある子要素を取得する必要があることを意味します。createPortal を使用すると、ドラッグされている要素の元の parentNode を取得できないため、createPortal ソリューションは放棄されます。 transform: scale の効果は、幅と高さを変更することによって実現されます。 モバイルで要素をドラッグするには、長押しする必要があります。 公式ドキュメントには、モバイル シナリオでは、ドラッグ可能な要素に対する指の操作がタップ、強制押し、スクロールのいずれであるかを判断できないため、ドラッグかどうかを判断するには要素を長押しする必要がある、と記載されています。
要素をドラッグして目的の位置にホバーすると、空いた挿入スペースの距離が不正確になります。これが上記の問題です。ドラッグ可能要素間に残されたプレースホルダーの自由距離はドラッグ可能要素の距離ですが、ドラッグ可能要素の余白は含まれません。この問題を参照してください。 最後に、ドラッグ中に空いたスペースにパディングが含まれるように、パディングを使用してドラッグ可能要素間の距離を制御します。 要約するreact-beautiful-dnd は比較的使いやすいです。2021年3月現在、v13.1.0 がリリースされており、比較的活発に動いています。上記の落とし穴が皆様のお役に立てれば幸いです。 参考文献公式サイト beautiful-dnd react-beautiful-dnd を使用してリスト間のドラッグ アンド ドロップを実装する方法についての説明はこれで終わりです。さらに関連性の高い react リスト ドラッグ アンド ドロップ コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux 環境での Oracle 導入チュートリアル
>>: Windows オペレーティング システムでポートの使用状況を照会およびクリアするプログラム
自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...
目次1. クエリの最適化1. MySQLチューニングの概要2. 小さなテーブルが大きなテーブルを動か...
letter-spacing プロパティ: 文字間のスペース (文字間隔) を増減します。このプロ...
この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...
目次1.watchは一般的なデータ(数値、文字列、ブール値)の変更を監視します。 1. 数値2. 文...
目次序文1. SCPの使用法2. sftpを使用する3. scp と sftp の違いは何ですか?ど...
序文ブラウザをどのようにズームしても、ボックス コンテナーの高さを常に 100% に保つ必要がある場...
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...
実験環境• 最小限のインストール済みの CentOS 7.3 仮想マシン• 構成: 1 コア/512...
1. MYSQLに接続するフォーマット: mysql -h ホストアドレス -u ユーザー名 -p ...
導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...
序文コア機能のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて...
ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...
問題: JDBCを使用してMySQLデータベースに接続すると、中国語の文字を挿入すると文字化けした文...
1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...