react-beautiful-dnd を使用してリスト間のドラッグアンドドロップを実装する

react-beautiful-dndを選ぶ理由

react-dnd と比較すると、react-beautiful-dnd はリスト間のドラッグに適しており、モバイル端末をサポートし、使いやすいです。

基本的な使い方

基本概念

DragDropContext: ドラッグ可能な範囲を構築する
onDragStart: ドラッグ開始コールバック
onDragUpdate: ドラッグ中のコールバック
onDragEnd: ドラッグ終了時のコールバック
ドロップ可能 - ドラッグ可能なブロックを配置できる領域
ドラッグ可能な要素

使い方

ドラッグアンドドロップを可能にするコードを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>
          )}
        </ドロップ可能>
      </ドラッグドロップコンテキスト>
    );
  }
}

アプリケーションのドロップ可能なものを一意に識別する必須の DroppableId (文字列)。特にドラッグ中は、このIDを変更しないでください。
provided.placeholder: プレースホルダー (このプレースホルダーはデフォルトであり、通常は要件を満たしません)
スナップショット: 現在のドラッグ状態。ドラッグ中にドロップ可能なオブジェクトの外観を変更するために使用できます。

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>
          )}
        </ドロップ可能>
      </ドラッグドロップコンテキスト>
    );
  }
}

ドラッグ可能なオブジェクトは常にドロップ可能なオブジェクト内に含まれている必要があります
DraggablebId (文字列): 一意の ID とインデックス (トラバーサルキーの場合はこれも必要) が存在する必要があります。特にドラッグ中は、この ID を変更しないでください。

ドラッグが終了したら、ソースデータを変更します

onDragEnd = 結果 => {
  const { ソース、 宛先、 ドラッグ可能な ID } = 結果;
  if (!destination) {
    戻る;
  }

  // ソース配列とターゲット配列を変更し、ドラッグした要素をソース配列から削除して、ターゲット配列に挿入します this.setState({
    xxx: xxx、
  });
}

使用中に発生した問題

ドラッグターゲット領域にカスタムプレースホルダーを追加する

react-beautiful-dnd がターゲット領域にドラッグされると、現在のドラッグ要素に対して、ターゲット領域内の要素間にスペースが自動的に確保されます。このスペースの距離は、ターゲット領域内のドラッグ可能な要素のサイズです (ただし、要素のマージンは含まれません。これも落とし穴です。解決策については後述します)。

したがって、この距離内で絶対配置を使用し、カスタムプレースホルダーを追加できます。具体的なアプローチ: 現在のカスタムプレースホルダー要素の左と上の距離を計算し、dragUpdate イベントでこの 2 つの距離を更新します。beatiful-dnd-custom-placeholder-demo を参照してください。

ドラッグ時に、ドラッグされた要素の変換プロパティを変更すると、ドラッグがどこかで停止し、ドラッグされた要素が間違った位置に配置されます。

公式ドキュメントには、ドラッグ可能な要素は position: fixed 配置を使用するが、transform の影響を受けるという大まかな説明があります。

#### 警告: `position: fixed`
`react-beautiful-dnd` は、ドラッグ要素の位置を決めるために `position: fixed` を使用します。これは非常に堅牢で、`position: relative | absolute | fixed` の親を持つことができます。しかし、残念ながら `position:fixed` は [`transform` の影響を受けます](http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/) (`transform: rotate(10deg);` など)。つまり、`<Draggable />` の親の 1 つに `transform: *` があると、ドラッグ中に位置を決めるロジックが間違ってしまいます。残念です! ほとんどの消費者にとって、これは問題にはなりません。
この問題を回避するには、[<Draggable /> の親を変更する](/docs/guides/reparenting.md) ことができます。パフォーマンス上の問題があるため、この機能はデフォルトでは有効になっていません。

次の解決策が提供されています: createPortal を使用して、ドラッグ要素を空の親要素に掛けます。問題を参照してください: 親の変換によりドラッグの配置が混乱します

しかし、この方法では問題は解決されません。カスタムプレースホルダーがまだ必要だからです。ドラッグ時には、プレースホルダーの左距離も計算する必要があり、これは、現在ドラッグされている要素の parentNode の下にある子要素を取得する必要があることを意味します。createPortal を使用すると、ドラッグされている要素の元の parentNode を取得できないため、createPortal ソリューションは放棄されます。 transform: scale の効果は、幅と高さを変更することによって実現されます。

モバイルで要素をドラッグするには、長押しする必要があります。

公式ドキュメントには、モバイルシナリオでは、ドラッグ可能な要素に対する指の操作がタップ、強制押し、スクロールのいずれであるかを判断できないため、ドラッグかどうかを判断するには要素を長押しする必要がある、と記載されています。

ドラッグの開始: 長押し
ユーザーは、指👇を要素の上で短時間🕑（長押し）押し続けることでドラッグを開始できます。

要素をドラッグして目的の位置にホバーすると、空いた挿入スペースの距離が不正確になります。これが上記の問題です。ドラッグ可能要素間に残されたプレースホルダーの自由距離はドラッグ可能要素の距離ですが、ドラッグ可能要素の余白は含まれません。この問題を参照してください。

最後に、ドラッグ中に空いたスペースにパディングが含まれるように、パディングを使用してドラッグ可能要素間の距離を制御します。

要約する

react-beautiful-dnd は比較的使いやすいです。2021年3月現在、v13.1.0 がリリースされており、比較的活発に動いています。上記の落とし穴が皆様のお役に立てれば幸いです。

参考文献

公式サイト beautiful-dnd
react-beautiful-dnd 入門チュートリアル

react-beautiful-dnd を使用してリスト間のドラッグアンドドロップを実装する方法についての説明はこれで終わりです。さらに関連性の高い react リストドラッグアンドドロップコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: