react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する

Notas do Editor

1. ドラッグ&ドロップが可能なリストコンポーネントを作成する React 用ライブラリ 特にキャプチャのようなリストコンポーネントに向いているコンポーネントです。
2. provided から渡る ref や props は全てこのように渡す必要があります。
3. provided から渡る ref や props は全てこのように渡す必要があります。
4. まずは DragDropContext, Droppable, Draggable という3つのコンポーネントを import します。 それぞれ Draggable はドラッグ対象のコンポーネント、 Droppable はドラッグ＆ドロップできる領域のコンポーネントになります。 それらを DragDropContext で囲むことでドラッグ＆ドロップが可能になります。 また、TypeScript 使用時には DropResult などの型が標準で用意されているため、それらを import することで定義が可能です。
5. 先ほど作成したデータを map で Draggable の中に流し込み、それを DragDropContext と Droppable の子要素として置いています。 Droppable には droppableId 、Draggable には draggableId を指定するようにします。これにより、並び替えが可能になります。 また、Droppable と Draggable はそれぞれ provided という引数が返り値として渡ってきます。provided.innerRef と provided.draggableProps または provided.droppableProps は、以下のようにそれぞれのコンポーネントが持つ最も外側にある要素に指定する必要があります。 Droppable にのみ、 placeholder というプロパティも持っています。 これは Droppable のコンポーネントの末尾に置くことで、ドラッグ中に発生するスタイルの崩れを、ドラッグしているコンポーネントの幅を確保することで防いでくれるものです。
6. 最後に、handleDragEnd 関数を DragDropContext の onDragEnd props に渡して、並び替えた後にその状態を保持できるようにします。 これでドラッグ&ドロップで並び替えするコンポーネントを実装することができました。