HTML5のAPIで遊ぼう Drag and Drop API(1)
- 2014/08/29
- atsuko.a
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
夏が終わりそうですね・・・今年はまだスイカ食べてないのに・・・
さて今回のブログからしばらく、HTML5で追加されたAPIで遊んでみようと思います。
第一回目はDrag and Drop APIについて。今回はひとまず動かすところまで。
そもそもHTML5のAPIって何よ
APIというのはApplication Programming Interfaceの略なのですが、まぁ簡単に言うと便利機能をいろんなところで使いまわせるようにしたセットみたいなものです。(超ざっくりですが)
ここで言う便利機能と言うのは色々な物を指しますが、
- Twitterのつぶやきを取得したり出来るTwitter API
- 郵便番号から住所を検索できる郵便番号検索API
- Googleマップを自サイト内に設置できるGoogle Maps API
など、多岐に渡ります。
で、そんな素敵な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,等)はコレを追加することでドラッグを無効にすることもできます。
テキストをドラッグする
1 2 |
<span class="cat" draggable="true">(ΦωΦ)<ドラッグできるよ!</span> <span class="cat" draggable="false">(ΦωΦ)<ドラッグできないよ!</span> |
(ΦωΦ)<ドラッグできるよ!
(ΦωΦ)<ドラッグできないよ!
上の(ΦωΦ)はドラッグできますが、下の(ΦωΦ)はドラッグできませんね?(正確にはドラッグできるのは<span>ですが)
これだけではつまらないしよくわからないので、↑で紹介したイベントを絡めてみましょう。
(面倒なのでjQueryを使用します。)
ドラッグしたら何かするその1
(ΦωΦ)<ドラッグしてね!文字が太くなりつつ赤くなりましたね。
HTML
1 |
<span id="cat1" draggable="true">(ΦωΦ)<ドラッグしてね!</span> |
JS
1 2 3 4 5 6 7 8 9 |
jQuery(function($){ var catElement = document.getElementById('cat1'); catElement.addEventListener('dragstart', function(){ $(this).css({ 'color': 'red', 'font-weight': 'bold' }); }, true); }); |
cat1というIDという要素を取得して、それに対してdragstartのイベントを設定していますね。
そして、イベントの中身で対象要素のCSSを変更しています。
ドラッグしたら何かするその2
(ΦωΦ)<ドラッグしてね!ドラッグ開始時の動きはその1と同じですが、ドラッグを終了した際にもCSSが変更になってますね。
HTML
1 |
<span id="cat2" draggable="true">(ΦωΦ)<ドラッグしてね!</span> |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
jQuery(function($){ var catElement = document.getElementById('cat2'); catElement.addEventListener('dragstart', function(){ $(this).css({ 'color': 'red', 'font-weight': 'bold' }); }, true); catElement.addEventListener('dragend', function(){ $(this).css({ 'color': '#333', 'font-weight': 'normal' }); }, true); }); |
その1と同じ要領でdragendのイベントを設定しています。
実際に動かしてみよう ドロップ編
ドラッグ&ドロップAPIなので、当然ドロップ時のイベントも指定したいですよね。
ドロップされる側の要素にも属性を追加してあげます。
- dropzone="copy" ドラッグされるデータのコピーがドロップされる
- dropzone="move" ドラッグされるデータが移動してドロップされる
- dropzone="link" ドラッグされるデータ元へのリンクがドロップされる
が、現在dropzone属性をサポートしているブラウザはありません_(:3」∠)_
では、どうするのかと言うと、こちらもJSで制御することになります。
(正確には、ドロップ動作をdropzoneで制御しつつドロップされたアイテムの処理はJSで行います)
将来的にdropzone属性のサポートが進めばドラッグ&ドロップの動作が更に簡単になりそうですね。
テキストをドロップする
ドロップエリアを増やしてみました。
(ΦωΦ)<ドラッグしてね!
ここにドロップしてね!(ΦωΦ)を下のエリアにドラッグしていくと(ΦωΦ)が青くなります。
HTML
1 2 |
<span id="cat3" draggable="true">(ΦωΦ)<ドラッグしてね!</span> <span id="area3">ここにドロップしてね!</span> |
JS
1 2 3 4 5 6 7 8 9 10 |
jQuery(function($){ var catElement = document.getElementById('cat3'); var areaElement = document.getElementById('area3'); areaElement .addEventListener('dragenter', function(){ $(catElement).css({ 'color': 'blue', 'font-weight': 'bold' }); }, true); }); |
ドラッグ時と同じ要領で、ドロップ先の要素にdragenterのイベントを設定しています。
dragenterの発生タイミングはドラッグ要素がドロップ要素に入った時なので(ΦωΦ)がドロップエリアに入った瞬間に青くなるのですね。
こちらも動きが地味なので、他のイベントを絡めてみましょう。
ドロップしたら何かするその1
(ΦωΦ)<ドラッグしてね!
ここにドロップしてね!なんと、(ΦωΦ)が移動してきました。
HTML
1 2 |
<span id="cat4" draggable="true">(ΦωΦ)<ドラッグしてね!</span> <span id="area4">ここにドロップしてね!</span> |
JS
1 2 3 4 5 6 7 |
jQuery(function($){ var catElement=document.getElementById('cat4'); var areaElement=document.getElementById('area4'); areaElement.addEventListener('dragenter',function(){ $(catElement).prependTo($(areaElement)); },true) }); |
jQueryを使って、(ΦωΦ)要素をドロップエリアに移動しています。
と、ここで時間切れです。
今回はいひとまずドラッグ&ドロップするところまでやってみました。
次回はもうちょっと実用的な使い方をしてみたいと思います。