ドラッグ&ドロップ可能なリストを作成するishigaki2020.11.2実践と知見Tweet2021年10月7日追記:初版の記事タイトルが誤っているというご指摘を受けたため、修正いたしました。アシスタントエンジニアの石垣です。リストを実装する機会があったため、その実装方法についてまとめてみようと思います。デフォルトではそのコンポーネントは用意されていません。そのため、別途プラグインを導入して独自に実装する必要がありました。いくつかプラグインの候補がありましたが、今回は以下の条件を満たしているかどうかでプラグインを決めました。軸の固定がプラグインのみでは実現できなかったため、候補から外しました。ドラッグ時にスタイルの付いていないDOMが複製され、見た目が崩れてしまうため候補から外しました。いうパッケージを導入して実装することにしました。基本となるコンポーネントを作成まず、配列を受け取りコンポーネントを表示するコンポーネントを実装しました。コンポーネントを入れています。配列を受け取って表示するコンポーネントを実装した状態ドラッグ用にアイコンを追加していますが、この時点ではまだドラッグで移動させることはできません。コンポーネントで囲みます。追加できない点に注意が必要です。配列の移動時に呼ばれる関数を定義することで、ドラッグ&ドロップ可能なリストを作成することができます。ついては公式のドキュメントを参照ください。以上でドラッグ&ドロップ可能なリストの実装をすることができました。使用してドラッグ&ドロップ可能なリストを実装する方法についてまとめました。ドラッグ&ドロップ可能なリストの実装の際に参考にしていただければと思います。Material-UIの実践で得た知見をシリーズ記事として集めてみました。Material-UIの開発に興味がある方、Material-UIをどう使ったらいいかの情報が知りたい方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集していますGaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。あなたの得意なフレームワークを教えて下さい!パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。オンラインでのリモート面談からはじめましょう。使ったコンポーネント組み込みを担当。プロジェクトチームのリードとして共に組み込み作業をしているメンバーの進行管理も行っています。休日はだいたい家で音楽を聴いており、たまにライブに出かけています。