CREATOR BLOG

HTML5のAPIで遊ぼう Drag and Drop API(1)

2014/08/29
atsuko.a
  • このエントリーをはてなブックマークに追加

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
夏が終わりそうですね・・・今年はまだスイカ食べてないのに・・・

さて今回のブログからしばらく、HTML5で追加されたAPIで遊んでみようと思います。
第一回目はDrag and Drop APIについて。今回はひとまず動かすところまで。

そもそもHTML5のAPIって何よ

APIというのはApplication Programming Interfaceの略なのですが、まぁ簡単に言うと便利機能をいろんなところで使いまわせるようにしたセットみたいなものです。(超ざっくりですが)
ここで言う便利機能と言うのは色々な物を指しますが、

など、多岐に渡ります。

で、そんな素敵なAPIですがHTML5の策定に併せていい感じの動き(機能)を実装できるようにAPI使えるようにしようぜ!と幾つかのAPIが追加されたのでした。
このAPI達は基本的にJavaScriptと組み合わせて使用されるので「HTML5 JavaScript API」と呼ばれるようです。

その中でも今回はDrag and Drop APIを触ってみます。

Drag and Drop APIとは

さて、今回のお題のDrag and Drop APIについてざざっとまとめます。

できることと対応ブラウザ

まぁ、読んで字の如く要素のドラッグ&ドロップができます。まぁ、そうよね、うん。
掴んで、移動(ドラッグ)してどこかで離す(ドロップ)という動作を制御しているので、軌道や過程よりもどこからどこまでなのかを大事にするようです。
具体的には7つのイベントを持っています

イベント名 発生タイミング デフォルトの動作
dragstart ドラッグが開始された時 ドラッグが開始する
drag ドラッグが継続している間 ドラッグを継続する
dragenter ドラッグ要素がドロップ要素に入った時 ユーザーのドロップ操作を拒否する
dragleave ドラッグ要素がドロップ要素から出た時 何もしない
dragover ドラッグ要素がドロップ要素と重なっている時 現在のドラッグ操作をリセットする
drop ドロップされた時 場合による
dragend ドラッグが終了された時 場合による

どう使うかは後述しますが、これらを利用するとサービスの管理画面やその他のAPIと組み合わせてドラッグ&ドロップによるファイルのアップロード等が簡単に実装できるようになります。
べんり(ΦωΦ)

そして対応ブラウザはこんな感じ

  • IE 9.0~(5.5から独自実装済み)
  • Google Chrome 4.0~
  • Firefox 3.5~
  • Safari 3.1~
  • Opera 12.0~

IEさんに関しては、5.5から独自実装されているのでIE7/8でも使えないことも無いようです。
が、書き方が異なるので今回は触れません。

ドラッグ&ドロップできる要素

基本的にはほぼすべての要素をドラッグ&ドロップできます。

※以降にあるデモは古いIEさんとfirefoxさんでは挙動がちょっとおかしなことになります。

実際に動かしてみよう ドラッグ編

ドラッグさせたい要素に、HTMLタグの属性を追加してあげましょう。

  • draggable="true" 要素をドラッグ可能にする
  • draggable="false" 要素をドラッグ不可にする
  • 値無し 要素のデフォルト

デフォルトでドラッグが出来る要素(img, a,等)はコレを追加することでドラッグを無効にすることもできます。

テキストをドラッグする

(ΦωΦ)<ドラッグできるよ!
(ΦωΦ)<ドラッグできないよ!

上の(ΦωΦ)はドラッグできますが、下の(ΦωΦ)はドラッグできませんね?(正確にはドラッグできるのは<span>ですが)

これだけではつまらないしよくわからないので、↑で紹介したイベントを絡めてみましょう。
(面倒なのでjQueryを使用します。)

ドラッグしたら何かするその1

(ΦωΦ)<ドラッグしてね!文字が太くなりつつ赤くなりましたね。
HTML

JS

cat1というIDという要素を取得して、それに対してdragstartのイベントを設定していますね。
そして、イベントの中身で対象要素のCSSを変更しています。

ドラッグしたら何かするその2

(ΦωΦ)<ドラッグしてね!ドラッグ開始時の動きはその1と同じですが、ドラッグを終了した際にもCSSが変更になってますね。
HTML

JS

その1と同じ要領でdragendのイベントを設定しています。

実際に動かしてみよう ドロップ編

ドラッグ&ドロップAPIなので、当然ドロップ時のイベントも指定したいですよね。
ドロップされる側の要素にも属性を追加してあげます。

  • dropzone="copy" ドラッグされるデータのコピーがドロップされる
  • dropzone="move" ドラッグされるデータが移動してドロップされる
  • dropzone="link" ドラッグされるデータ元へのリンクがドロップされる

が、現在dropzone属性をサポートしているブラウザはありません_(:3」∠)_

では、どうするのかと言うと、こちらもJSで制御することになります。
(正確には、ドロップ動作をdropzoneで制御しつつドロップされたアイテムの処理はJSで行います)
将来的にdropzone属性のサポートが進めばドラッグ&ドロップの動作が更に簡単になりそうですね。

テキストをドロップする

ドロップエリアを増やしてみました。
(ΦωΦ)<ドラッグしてね!
ここにドロップしてね!(ΦωΦ)を下のエリアにドラッグしていくと(ΦωΦ)が青くなります。
HTML

JS

ドラッグ時と同じ要領で、ドロップ先の要素にdragenterのイベントを設定しています。
dragenterの発生タイミングはドラッグ要素がドロップ要素に入った時なので(ΦωΦ)がドロップエリアに入った瞬間に青くなるのですね。

こちらも動きが地味なので、他のイベントを絡めてみましょう。

ドロップしたら何かするその1

(ΦωΦ)<ドラッグしてね!
ここにドロップしてね!なんと、(ΦωΦ)が移動してきました。
HTML

JS

jQueryを使って、(ΦωΦ)要素をドロップエリアに移動しています。

と、ここで時間切れです。
今回はいひとまずドラッグ&ドロップするところまでやってみました。
次回はもうちょっと実用的な使い方をしてみたいと思います。

この記事を書いた人

atsuko.aフロントエンドエンジニア

猫派の甘党、胃が弱い系WEB屋。 コーディングしたり、たまにデザインしたりします。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive