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 オペレーティング システムでポートの使用状況を照会およびクリアするプログラム
序文フロントエンドで非常に便利な、小さなアイコン付きの検索ボックスを作成する方法をご紹介します。エフ...
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...
目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...
テーブルデータを作成する テーブル `praise_info` を作成します ( `id` bigi...
まずmysqlの圧縮バージョンをダウンロードします。公式ダウンロードアドレスは123WORDPRES...
目次一方向データフローの説明Vue2.x の使用法親コンポーネントに変更を通知するイベントのフォーム...
この記事では、Linux 環境の Apache サーバーでセカンダリ ドメイン名を構成する方法につい...
この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介...
関数のカリー化(黒い疑問符の顔)? ? ?カレー(黒い疑問符の顔)? ? ?これは完璧な中国語翻訳で...
目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...
純粋な CSS を使用して、マウスが行の上を通過するときに行の背景色を変更し、その行にフォーカスがあ...
目次1. 複数の .catch 2. 複数の .catch 3. .then と .catch の連...
最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...
Web ページ上の色の表現は、さまざまな要因によって影響を受けます。Web ページで非常に美しい配色...