Angular7からドラッグアンドドロップが色々できるようになっています

求人
Angular7からドラッグアンドドロップが色々できるようになっています

Angular6からAngular7にバージョンアップする方法」でもドラッグアンドドロップの方法を記載していますが、その他いろんなドラッグアンドドロップができるようになっていたので試してみました。

DragDropModuleをインポートするのを忘れずにしてください。

cdkDragディレクティブを付けると、その要素はドラッグアンドドロップができるようになるのですが、さらにその親要素にcdkDropListをつけるとcdkDragディレクティブのついた要素をグループ化することが出来るようになり、その要素内でのドラッグアンドドロップが可能になります。

サンプル

テンプレートを以下のようにします。cdkDropList,cdkDragはディレクティブです。

cdkDropListDroppedは、ユーザーがドラッグを終了すると実行されます。

以下、htmlファイルです。

以下、tsファイルです。cssファイルは割愛します。

moveItemInArrayは3つの引数を取ります。

  • 第一引数…項目を移動する配列
  • 第二引数…項目の開始インデックス
  • 第三引数…項目を移動するインデックス

Angular7からドラッグアンドドロップが色々できるようになっています

リストとリスト間でのドラッグアンドドロップ

cdkDropListディレクティブとcdkDragは基本的に同じ使い方です。

[cdkDropListData]でリストの配列を指定します。

[cdkDropListConnectedTo]で転送したいリストを設定します。

これで、リストとリストの間でのドラッグアンドドロップが可能になります。

以下、htmlファイルです。

以下、tsファイルです。

transferArrayItemは配列から配列に移動する際に使用するメソッドで、3つの引数を取ります。

  • 第一引数…転送する配列
  • 第二引数…配置する配列
  • 第三引数…現在の配列の項目のインデックス
  • 第四引数…項目を挿入するインデックス

サンプル

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA