HTML5を業務アプリで使うための勉強会 # 3
今回はDrag & Drop APIを取り上げました。
ドラッグとドロップで起きるイベントの種類についてと、
要素にドラッグ＆ドロップのイベントを仕込む方法について。
また、データをやりとりするためのDataTransferについてなど。
-
- いいね！2
GDG Okayama
@gdgokayama
本日のHTML5を業務アプリで使うための勉強会# 3は、先週と同じ倉式珈琲店 青江店で19:00から行います。現地集合で、到着後は店に入って場所を確保して下さい。 内容はほぼDrag and Dropになる予定です。 #gdgchugoku
2013-04-04 06:31:01
パトラッシュ@中間管理職
@patorash
カスタムデータ属性にアクセスできるブラウザだったら、JavaScriptでelement.dataset.****でアクセスできる。対応していない場合はgetAttribute("data-****")で取れるが、プレフィクスのdata-が必要。 #gdgchugoku
2013-04-04 19:12:59
パトラッシュ@中間管理職
@patorash
ドラッグ＆ドロップが使えるか？('draggable' in div)みたいにすると、draggableというプロパティがあるかどうかを確認できるらしい。フムー。 あ、divはcreateElement('div')したやつ。 #gdgchugoku
2013-04-04 19:23:23
パトラッシュ@中間管理職
@patorash
jQueryでゴリゴリ書いていたのが、draggable="true"と多少のJavaScriptで動くと。 #gdgchugoku
2013-04-04 19:31:17
パトラッシュ@中間管理職
@patorash
ドラッグ対象: dragstart, drag, dragend ドロップ対象: drag enter, drag leave, drag over, drop #gdgchugoku
2013-04-04 19:36:47
パトラッシュ@中間管理職
@patorash
e.preventDefault()でイベントの伝搬を止める。ドラッグされた要素の親までイベントが通知されるのを止める。 #gdgchugoku
2013-04-04 19:45:01
パトラッシュ@中間管理職
@patorash
ドラッグ＆ドロップのどちらのイベントにも対応するサンプルだったのでどちらにも対応するように書いていくとちょっと混乱するよという説明。 #gdgchugoku
2013-04-04 19:48:28