AngularでDrag&Dropの実装

記載日：2021/5/9
AngularでのDrag＆Dropの実装について、忘れないように記載します。

目的

　AngularでDrag＆Dropを実装する。

環境

　Angular：11.2.13
　Angular CLI：11.2.12
　Node js：10.19.0
　OS：Ubuntu

目次

　１．シンプルなDrag＆Drop
　２．入替の起こるDrag＆Drop

作業

１．シンプルなDrag＆Drop

※スマホ非対応
・Drag＆Dropしたいエレメントに対して、draggableプロパティを有効化。（html）
　　draggable="true"
・Drag＆Dropしたいエレメントに対して、dragstartやdragendなどの使いたいdragdropイベントを記載。（html）
・上記dragdropイベントで発火するメソッドを記載。（typescript）

ソースコードはこちら
動きの確認はこちら

２．入替の起こるDrag＆Drop

※スマホ非対応
「１．シンプルなDrag＆Drop」に、以下を追加。
・Drag＆Dropしたいエレメントの操作性を高めるために、styleにdisplay: block;を記載。（html）
・入替を起こすために、
　　dragstartメソッドで、ドラッグしたエレメント情報を取得。
　　dropメソッドで、ドロップエリアのエレメント情報を取得。その後、２つのエレメント情報をもとに、配列の入替を実施。

ソースコードはこちら
動きの確認はこちら

参考にさせて頂いたサイト

https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API