活動報告7 d&dなディレクティブを作る-

パソコン部活動報告
2015/05/30
最新の技術をとりあえず試
してみることを目的とした
部です。

2015/05月活動内容
1. angular.js1.3系を利用して再利用可能なディレクティブを作成するその③
Look at me mom...dad and I are having so much fun!

1.概要
1.今回作る予定のディレクティブ
スマホでは使わないと思うけど、タブレットではDrag&Drop操作はありだと思う。
なので、汎用性のあるDrag&Dropディレクティブができれば、UIのバリエーションを増やせるなーと
思い外国産のディレクティブを使ってみたけど一部動作しなかったり拡張しようとしたけどちょっとレ
ベルが足りなかった。
でもDrag&Dropって実際使うと使いにくかったりするよね。
結局はエンジニアの自己満足な気がしてきた。
というわけで、作ればいい！という結論に至ったのでつくってみます。
余談ですが、単一画面内でDrag&Dropのソート機能とかだけを使うパターンの場合はJQueryの
sortableでやればいいと思う。

1.概要
● Drag元とDrag先をそれぞれ指定するディレクティブ
● Drop後はイベントを送出させる
● リピートされた要素でもDrag&Dropできるようにする
● HTML5のDrag&Dropを使う
機能
ぶっちゃけt○elloみたいなUIを自分でも実装できるようになりたかったのでこんな感じの機能にして
みた。
t○ello使ってみたけど、使いやすいなーって思いました。（別に宣伝じゃないよ）
最近のタスク管理アプリはカードベースのUIが多い気がする。
このUIができると、アジャイル開発用のredmine的なもの作れる気がする。
ストーリーをカードにして、順番を定義させて～的なやつ。

2.ディレクティブを考える
1.ディレクティブの構成
Drag可能なエリアを指定させるタイプのディレクティブとDrop先であるディレクティブを指定するディ
レクティブの2つが必要になる。
それぞれのパラメータとかを考えてみた。
restrict: 'AE'
transclude: false
require: '^ngModel'
scope: {dragindex: '='}
restrict: 'A'
require: '^ngModel'
scope: {}
Drag Drop
transcludeをDrag側に指定してみた。
これはディレクティブとした要素の内容をテンプレートの一部として利用できるようになるディレクティ
ブ。
後は、requireを「require: '^ngModel'」ってする。
親コントローラーを参照できるようにして、そこからDragとDropされた値を書き換えるためね。
dragIndexは位置を特定するのに使う予定。

リピート要素に対して指定されるディレクティブを想定しているので考え始めるといろいろでてきた。
● Drag中に値を保持させたり、Dropした時にどこに落ちたかわからないといけなよね。
● ってことは、DragディレクティブとDropディレクティブで値を共有しておかなきゃいけないよね。
● Drop後はDrag先から要素を消したいよね
● このディレクティブを使う側はそこらへんは意識しないで使いたいよね。
ってことで値の受け渡しとかはSharedServicesにすればよくね？
あとはどのタイミングで入れるよ？ってことなんだけど、をDrag要素、をエリアとし
た場合Drag&Dropでは、①～⑥のアクションが起こるよね。
それぞれでイベントが発生してるわけなんだけど、そのイベントを利用すればいけそう。
Dragする Drag中 Dropす
る
① ② ③
Dropエリ
アに入る
④
dragstart dragenter dragover
Drop先を
選ぶ
drop
⑤
Drag対象を設定
dropされる可能性がある
からdropを特定するため
のclassを設定
位置を設
定
Drag対象を取得し
てDrop先に設定し
て削除
Dropエリ
アから出
る
dragenter時
に設定した
classを削除
dragleave
⑥

SharedServicesを作ってみた。
orverIndexはdragoverを出してる要素に指定された
indexを格納する変数。
fromDataはdragされた要素を生成する際に使用した
scopeの値を保持する変数。

dragディレクティブを作ってみた
。
SharedServicesをインジェクショ
ンして使えるようにしたのがこれま
でと違うところかな。
linkで要素にdraggableを追加してDrag可能にして、分離スコープのdragindexをdata-indexとして追加する。
dragstartをonしておいて、イベント発生時に対象要素に指定したdata-indexとhtmlを取得しておいて
dataTransferにぶっこむ。
イベント発生したscopeにバインドされた値をSharedServicesのfromに設定。

dropディレクティブを作ってみた
。
まずは
dragenter,dragover,dragleaveのイ
ベントの処理から。
dragenterとdragleaveに関しては
イベントが発生した要素にイベント
用のclassを追加/削除しているだけ
。
dragoverはイベントが発生した要
素から位置を特定するためのindex
が存在している（drag要素として
も指定されている）かをチェックし
てindexがあればそれを設定。
なかったら特に指定しない。これなら一方的にDropするエリアであっても対応できる気がする。

dropイベント時の処理。

ここの処理ではdataTransferとSharedSearviceからデータを取得して、$modelValueの値を変更する
ことで画面側でも反映されるようにしてる。
後は必要そうな情報をobjectにまとめて$emitするって感じ。
一応今はDrop先(to)、Drag元(from)、削除対象(remove)、同一要素内での移動かのフラグ
(isSameContainer)を渡してる。
利用する側は「dropItemComplete」をonしておいてイベントをキャッチする感じかな。
キャッチしたら、socket.ioでemitして別の人の画面も反映させにいけば、比較的リアルタイムな感じ
で行ける気がする。

3.ディレクティブを使う
1. HTMLに指定する
赤枠のところが指定した箇所ね。

うごかすぜー！！！！！！！！

４.最後
Drop先の要素が1つしない場合に、一番下に入れれないバグがあるけど、とりあえず動くのが作れた。
たぶん、indexの取得部分にバグがあるのかなー。
まぁそのうち直します。
今回のディレクティブ作成は結構勉強になったなー。
socket.ioもふつうに使えたから、やれることのバリエーションが増えたかなー。
次はReactやるか、それともUnity5やるか、どっちにしようかな。

活動報告7 d&dなディレクティブを作る-

More Related Content

What's hot (20)

Similar to 活動報告7 d&dなディレクティブを作る- (20)

More from vx-pc-club (8)

活動報告7 d&dなディレクティブを作る-

Editor's Notes