AngularでTrelloのようなリストをドラッグ&ドロップできるような画面を作る方法をご紹介します! Angular Material CDKのDragDropModuleを使用します。 検証環境 Angular CLI: 8.3.21 Node: 12.13.0 OS: darwin x64 Angular: 8.2.14 @angular/cdk: 8.2.3 事前準備 @angular/cdkが入っていない場合は追加しましょう。 $ ng add @angular/cdk Angularのプロジェクト作成方法はこの記事では割愛します。 実装してみる app.module.tsにインポート文を追加 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule }
![AngularのDragDropModuleを使ってToDoリストを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/07aa11b12376196229f0af49b9b58f3d8d0f1b87/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F06%2FAngular8.png)