ブログ

読んで思い出す。忘れるために書く

トップ > Ruby on Rails > Techpit 教材をつかったモクモク会に参加した (Trello風ToDoタスク管理アプリ)

Techpit 教材をつかったモクモク会に参加した (Trello風ToDoタスク管理アプリ)

Ruby on Rails

「【Railsアプリ開発講座】Trello風ToDoタスク管理アプリを作成しよう！」に参加した

カリキュラムに沿って完成させて、その次の日に機能追加した話

完成したもの

こういう見た目のアプリになった

Trello 風アプリ

アプリの動作 (リストとカード)

最後までカリキュラムに沿って; リストを増やしてその子としてカードを登録していく機能までは実装した

カードを移動する操作は

  1. カードをクリックして 詳細ページに移動
  2. リストの所属を <select/> で指定して submit

というページ移動式の実装方法だった

この部分で、どんな実装をするのか 勝手に思い込んでいたことがあって、「Drag & Drop でカードをリスト間で移動できる」機能にすると思ってた

完成品の改変

そこで実際に思った通りのものを実装することにした

動作イメージは、つぎの GIF 画像のようになった

Drag & Drop でカードを移動できる

コードの公開について

カリキュラムの内容は有償なのでコードは公開していいのか 判断がつかない... ので、ぜんぶは公開しない

追加で実装した部分はカリキュラムの内容に関わらない公開情報なので調べれば実装できる

Drag & Drop API

今回の追加実装では HTML ドラッグ＆ドロップ API を利用した

Drag & Drop API が用意してくれているイベントに合わせて、次の動作を書いた

  • Drag が開始されたらDrop を受けるための要素を表示
  • Drop する場所の上に要素が来たら クラスの付与を切り替えて CSS スタイルの変更
  • Drop された (or キャンセル) ときに Drop を受けるための要素を非表示に切り替え
  • Drag & Drop されたら移動先に要素を append して、移動元の要素は削除する

Drag & Drop の動作を実現するために必要なイベントは意外と多かった

イベント登録処理のコード

<form/> の追加

JS 側の実装に合わせて <form/> も用意して、Rails 側でもカードの移動を適用できるようにした Rails 側でも form を用意する

Drag & Drop のイベントに合わせて、<form/> の <input/> 要素の値を変更して submit している

Links